/********************************************
 * Personnalisation du thème html5up_alpha
 *
 *Seuil des responsives
* - 1680px
* - 1280px
* - 980px
* - 840px
* - 736px
* - 480px
*
 **********************************************/


/* Correctif html5up_alpha - SPIP
-----------------------------------------------*/



@font-face {
	font-family: 'BlindSignature';
	src: url('fonts/BlindSignature.eot');
	src: url('fonts/BlindSignature.eot') format('embedded-opentype'),
		 url('fonts/BlindSignature.woff2') format('woff2'),
		 url('fonts/BlindSignature.woff') format('woff'),
		 url('fonts/BlindSignature.ttf') format('truetype'),
		 url('fonts/BlindSignature.svg#BlindSignature') format('svg');
}
@font-face {
	font-family: 'WC_RoughTrad';
	src: url('fonts/WC_RoughTrad.eot');
	src: url('fonts/WC_RoughTrad.eot') format('embedded-opentype'),
		 url('fonts/WC_RoughTrad.woff2') format('woff2'),
		 url('fonts/WC_RoughTrad.woff') format('woff'),
		 url('fonts/WC_RoughTrad.ttf') format('truetype'),
		 url('fonts/WC_RoughTrad.svg#WC_RoughTrad') format('svg');
}
@font-face {
	font-family: 'DAYROM';
	src: url('fonts/DAYROM.eot');
	src: url('fonts/DAYROM.eot') format('embedded-opentype'),
		 url('fonts/DAYROM.woff2') format('woff2'),
		 url('fonts/DAYROM.woff') format('woff'),
		 url('fonts/DAYROM.ttf') format('truetype'),
		 url('fonts/DAYROM.svg#DAYROM') format('svg');
}
@font-face {
	font-family: 'DAYROM_X';
	src: url('fonts/DAYROM_X.eot');
	src: url('fonts/DAYROM_X.eot') format('embedded-opentype'),
		 url('fonts/DAYROM_X.woff2') format('woff2'),
		 url('fonts/DAYROM_X.woff') format('woff'),
		 url('fonts/DAYROM_X.ttf') format('truetype'),
		 url('fonts/DAYROM_X.svg#DAYROM_X') format('svg');
}


/* Variables couleurs
-----------------------------------------------*/
:root {
	--marron_fonce: #2b1a08;
	--marron_moyen: #5d360f;
	--marron_clair: #9c8269;
	--brun: brown;
	--rouge: #cf0a1d;

	--fond1: #e0eefc;
	--fond2: #cbe2fa;
	--fond3: #b5d7f7;
	--fond4: #a0cbf5;
	--fond5: #8bbff3;
	--fond6: #75b4f1;
	--fond7: #60a8ee;
	
	/*
	--fond7: #7aa5cd;
	--fond6: #86b1da;
	--fond5: #93bee8;
	--fond4: #a0cbf5;
	--fond3: #add8ff;
	--fond2: #bae5ff;
	--fond1: #c7f3ff;
	*/
	
	--scission2: #d9dbba;
	--scission2: #f1bca4;

	--fonce1: #4e6073;
	--fonce2: #35404c;
	--fonce3: #1e2328;
	
	--vert: #d1d156;
	--vert_rvb: 209,209,86;
	--vert_fonce:	#a8aa2f;
	--orange: #e9b23b;
	--orange_rvb: 233,178,59;
	--orange_fonce: #c18f0f;
	
	--bleu_fonce1: #518ac2;
	--bleu_fonce2: #436d98;
	--bleu_fonce3: #355170;
	--bleu_fonce4: #26374a;
	--bleu_fonce5: #181e27;
	--bleu_fonce5_rvb: 24,30,39;
	--bleu_nuit: #0F056B;
	
	--height_header: 3em;
}


/* layout
-----------------------------------------------*/
body { text-align: left; /*background:#ddd;*/ min-width: 320px; color: #fff; }
/*body, input, select, textarea { font-weight: normal; }*/
#page-wrapper { padding-top:  var(--height_header)}
#header { z-index: 1001; /*background: #60a8ee;*/ background-color: var(--bleu_fonce5); height: var(--height_header); line-height: var(--height_header); }
#header.alt { background-color: var(--bleu_fonce3) }
#main { position: relative; margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
#main > header h1 { margin: 0; }
/* fonds old
#one { background-color: var(--fond1); }
#two { background-color: white; }
#three { background-color: var(--orange); }
#four { background-color: var(--vert); }
*/
#one { background-color: var(--bleu_fonce1); }
#two { background-color: var(--bleu_fonce2); }
#three { background-color: var(--bleu_fonce3); }
#four { background-color: var(--bleu_fonce4); }
#footer { background-color: transparent; }

/* fixed mobile error */
@media (min-width: 980px) {
	#banner { background-attachment: fixed !important; }
}
@media (max-width: 979px) {
	#banner { background-attachment: initial !important; }
}
@media screen and (max-width: 840px) {
	body.navPanel-visible #page-wrapper {
	-moz-transform: translateX(175px);
	-webkit-transform: translateX(175px);
	-ms-transform: translateX(175px);
	transform: translateX(175px);
	}
	#navPanel { 
	-moz-transform: translateX(-175px);
	-webkit-transform: translateX(-175px);
	-ms-transform: translateX(-175px);
	transform: translateX(-175px);
	width: 175px;
	}
	#navButton { width: 4rem !important;}
	body.navPanel-visible #navButton {
		-moz-transform: translateX(175px);
		-webkit-transform: translateX(175px);
		-ms-transform: translateX(175px);
		transform: translateX(175px);
	}
}


/* STYLES TRANSVERSAUX
-----------------------------------------------*/
h1 {font-size: 2.75em;margin-bottom:1em; line-height: 1.5em;}
h2 {font-size: 1.75em;}
a { border: none;}
a:focus, a:active { background-color:transparent; color:inherit; }
a:hover { background-color:transparent; color: var(--rouge) !important; border-bottom: none; }
.descriptif { font-size: 1em; line-height: 1.4em; letter-spacing: 0.15em; opacity: 1; outline: 0; text-align: left; text-transform: uppercase; }
.descriptif big { font-size: 200%; line-height: 200%; color: var(--rouge/*--brun*/); letter-spacing: .2em; text-shadow: 1px 1px 1px white /*pink*/; font-weight: 400; }
.special .descriptif big { line-height: 100%; }
.texte { text-align: justify; }
.texte big {
	font-size: 110%;
	line-height: 180%;
	color: var(--rouge/*--brun*/);
	letter-spacing: .1em;
	text-shadow: 1px 1px 1px white /*pink*/;
	font-weight: 800;
	font-style: italic;
	margin: 0 100px 2em;
	text-indent: 0;
	display: block;
	text-align: center;
}
.droite { text-align: right; }
.gauche { text-align: left; }
.signe { font-family: 'DAYROM_X' !important; text-transform: none; }
.signe.gros { font-size: 2em; line-height: 2em; color: var(--brun/*--rouge*/); text-align: center; text-shadow: 1px 1px 1px white /*pink*/; }
/* blocs */
.bande { padding: var(--height_header) /*56px*/ 0; }
.flex_list { display: flex; flex-wrap: wrap; flex-direction: row; align-content: flex-start; gap: 10px;}
/* divers */
.perso_active {background-color : #e89980 ;}
.box p:last-child {margin-bottom: 0;}
/* responsive */
@media screen and (max-width: 736px) {
  .container { width: calc(100% - 30px) !important;margin: 0 15px;}
  .texte big { margin: 0 0 2em; }
  }
@media (max-width: 479px){
	.descriptif big, .texte big { font-size: 150%; line-height: 150%; }
}


/* HEADER
-----------------------------------------------*/
#header a {color:#fff; text-decoration: none; border: 0;}
/* les squelettes SPIP utilisent div.accueil (et non h1) pour le header */
#header .accueil { color: inherit; height: inherit; left: 1.25em; line-height: inherit; margin: 0; padding: 0; position: absolute; top: 0; }
#header .accueil a { color: #fff; font-weight: 400; border: 0;}
#header a, #navPanel a {-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;}
#header a:hover, #navPanel a:hover { background-color: var(--vert);}
#header nav > ul > li a { border-radius: 0; line-height: var(--height_header) ; height: var(--height_header); }

@media screen and (min-width: 841px) {
	.menu_reduit { display: none }
}
@media screen and (max-width: 840px) {
	.menu_reduit { display: block }
}



/* BANNER
-----------------------------------------------*/
/* les squelettes SPIP utilisent h1 (et non h2) pour le titre */
#banner .inner { margin: 0 auto; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; }
#banner .inner > * { align-items: center;  }
#banner #logo_site { 
	-moz-transform: translateY(0) rotate(15deg) ;
	-webkit-transform: translateY(0) rotate(15deg) ;
	-ms-transform: translateY(0) rotate(15deg) ;
	transform: translateY(0) rotate(15deg) ;
	opacity: 1;
	animation: poing 5s linear;
	z-index: 2;
}
/* animations https://talks.freelancerepublik.com/creation-animation-css/ */
@keyframes poing {
  from { opacity: 0; transform: rotate(0deg) translateY(0); }
  to { opacity: 1; transform: translateY(0) rotate(15deg) ;  }  
}
@keyframes titre {
	0% { opacity: 0; transform: translateX(-600px); }
    20% { opacity: 1; }
    100% { opacity: 1; transform: translateX(0); }  
}
@keyframes opacite {
  0% { opacity: 0; }
  60% { opacity: 0; }
  100% { opacity: 1; }
}
/* https://css-tricks.com/snippets/css/typewriter-effect/*/
/* The typing effect */
@keyframes typing {
  0% { width: 0; text-indent: 0; }
  60% { width: 0; text-indent: 0; }
  100% { width: 100%; }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--brun); }
}
#banner #titre_site { flex: auto; text-align: left}
#banner h1 {
	color: var(--marron_fonce);
	font-family: 'WC_RoughTrad';
	font-size: 4em;
	line-height: 1em;
	margin: 0.5em 0 0 0;
	padding: 0;
	margin-left: -80px;
	animation: titre 5s ease-out;
}
#banner h3 { color: var(--brun); width: 100%; text-align: left; margin-bottom: -30px; 
	overflow: hidden; /* Ensures the content is not revealed until the animation */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	letter-spacing: .15em; /* Adjust as needed */
	background-color: rgba(255,255,255,0.5); font-weight: 500;	
}
/* responsive */
@media (max-width: 1679px){
	#banner { padding: 6em 0 18em 0;}
}
@media (min-width: 1280px){
	#banner .inner { width: 80%;}
	#banner #logo_site { width: 300px; }
	#banner h3	{ text-indent: 17%;}
}
@media (min-width: 736px) and (max-width: 1279px){
	#banner .inner { width: 90%;}
	#banner #logo_site { width: 250px; }
	#banner h3	{ text-indent: 15%;}
}
@media (min-width: 736px){
	#banner h3	{ font-size: 1.5em;}
}
@media (max-width: 735px){
	#banner .inner { width: 90%;}
	#banner #logo_site { width: 200px;  }
	#banner h3	{ text-indent: 17%;}
}
@media (min-width: 480px) and (max-width: 735px){
	#banner h1 { margin-left: -30px; font-size: 3.5em;  }
	#banner h3	{ font-size: 1.2em;}
}
@media (min-width: 480px){
	#banner h3	{ border-right: .07em solid brown; /* The typwriter cursor */
		white-space: nowrap; /* Keeps the content on a single line */
		animation:	typing 5s steps(40, end), blink-caret .75s step-end infinite;	}
}
@media (max-width: 479px){
	#banner h1 { margin-left: 0; font-size: 3em;  }
	#banner h3 { white-space: initial; font-size: 1.2em; animation: opacite 5s linear }
}


/* BOX SPECIAL
-----------------------------------------------*/
.special .image.featured { margin: 1.5em 0; }
.special .image.featured img {float:none;margin:0;}
.special .image.featured img { height: auto; border-radius: 1em; }


/* L'accueil
-----------------------------------------------*/
.sommaire h1 {color: #fff ;}
/*	tricky : si aucun slogan défini, donc pas de H2, ne pas afficher une bordure grise sur l'intro */
.sommaire header.major p { margin-top: 0; padding-top:0;border:0; color: white }
.sommaire header.major blockquote p { font-style: italic !important; }
.sommaire header.major h2 + div  p { margin-top: 1.5em; padding-top: 1.5em; border-top: 2px solid #e5e5e5; font-size: 1.25em; line-height: 1.5em; }
.sommaire header.major .texte { font-size: 1.2em; }


/* DIAPORAMA OEUVRES SOMMAIRE
-----------------------------------------------*/
/* tags_list */
#two.bande { padding-top: 0; }
#diapo_oeuvres { padding-top: 56px; }
#diapo_oeuvres .logo_mot { width: 200px; float: right; margin-left: 10px; overflow: hidden }
#diapo_oeuvres .mots_pagination { overflow: hidden; }
.tags_list .name { font-weight: 500; text-transform: lowercase; line-height: 1em; margin-left: 0.4em;}
.tags_list .button { transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; background-color: var(--orange); border-radius: 0; border: 0; color: var(--brun) /*color: white*/; cursor: pointer; display: inline-block; font-weight: 900; text-align: center; text-decoration: none; white-space: nowrap; padding: 0.3em 0.6em; margin: 0.1em; align-items: center; display: flex;}
.tags_list .button:hover, .tags_list .item_on .button { background-color: var(--vert); }
/* diapo */
.diaporama.bande { padding-bottom: 0; }
.diaporama .flex_list article { flex: 45%; text-align: center; padding: 30px 10px; align-content: space-between; overflow: hidden; }
.diaporama article { font-family: 'DAYROM'; border-radius: 6px; }
.diaporama article a { display: block; width: 100%; height: 100%; color: inherit; }
.diaporama article a, .diaporama article h3 { color: white; -moz-transition: all 0.7s linear; -webkit-transition: all 0.7s linear; -ms-transition: all 0.7s linear; transition: all 0.7s linear; }
.diaporama article {-moz-transition: all 07s linear; -webkit-transition: all 0.7s linear; -ms-transition: all 0.7s linear; transition: all 0.7s linear;}
.diaporama article:hover { background-color: #f8f8f8; }
.diaporama article:hover { background-color: var(--fond1); }
.diaporama article:hover h3 { color: #646464; }
.diaporama article a:hover { color: var(--brun); }
.diaporama article .button.alt { box-shadow: none}
.diaporama article:hover .button.alt { box-shadow: none; color: var(--brun);}
.diaporama article .fas { font-size: .8em; }
.diaporama article .signe { font-size: 1em; line-height: 1.5em; height: 30px;  -moz-transition: font-size 0.5s linear; -webkit-transition: font-size 0.5s linear; -ms-transition: font-size 0.5s linear; transition: font-size 0.5s linear; }
.diaporama article a:hover .signe { font-size: 1.5em; }
.diaporama article .descriptif { width: 70%; margin: 1em auto; text-transform: none; text-align: center}
@media (min-width: 736px) {
	.tags_list .button { font-size: 1rem; letter-spacing: 0.15rem; height: 2.4rem; }
	.diaporama article .descriptif { width: 70%; }
}
@media (max-width: 735px) {
	.tags_list .button { font-size: .9rem; letter-spacing: 0.02rem; height: 2rem;  }
	.tags_list.flex_list { gap: 5px; }
	.diaporama article .descriptif { width: 100%; }
	#diapo_oeuvres img.logo_mot { display: none; }
}
@media (max-width: 479px){ 
	.diaporama .flex_list article { flex: 90%; }
}


/* ARTICLE
-----------------------------------------------*/
.article #main { background-color: var(--fond1); }
.article h2 { color: var(--orange); }
.article .retour { position: absolute; left: 2rem; background-color: rgba(var(--orange_rvb), 0.6); padding: 0.2em 0.5em; border-radius: 0.3em;}
.article .retour:hover {background-color: var(--orange);}
.article .retour.haut { top: 1.6rem; }
.article .retour.bas { bottom: 1.6rem; }
.article .retour a { color: white !important; font-weight: 500;}
.article .box { margin: var(--height_header) 0; background-color: var(--bleu_fonce2)}
.article article { font-family: 'DAYROM'; text-align: center; color: white }
.article article .descriptif { width: 70%; margin: .5em auto; text-transform: none; text-align: center; font-size: 1.1em;}
/*.article article picture { width: 100%; }*/
.article .box article .image.featured:first-child { border-radius: 0; margin-top: .5rem; margin-bottom: .5rem; }
.article article h1 { margin-bottom: .3rem; color: white }
.article header h1 + p {font-size: 1.25em;}
/* galerie */
.article .flex_list li { flex: 45%; text-align: center; padding: 10px; align-content: space-between; overflow: hidden; }
.article .flex_list li .spip_logo { margin: 0; }
/* diaporama */
.article .lity-group-start-stop button { background-color: transparent; height: 1.3rem; line-height: 1.3rem;}	
.article .lity-group-start-stop button b::after, .article button.lity-close b {-moz-transition: color 0.5s linear; -webkit-transition: color 0.5s linear; -ms-transition: color 0.5s linear; transition: color 0.5s linear; }
.article button.lity-close b { color: white; }
.article .lity-group-start-stop button:hover b::after, .article button.lity-close:hover b { color: var(--vert)}
.article .box_mediabox button[class*="lity-"]:focus { outline: none; }
.article  button.lity-close { z-index: 10;}
.box_mediabox .lity-content { min-width: 320px !important; }
/* responsive */
@media (min-width: 980px){ .article article .descriptif { width: 50%; }}
@media (min-width: 480px) and (max-width: 979px){ .article article .descriptif { width: 70%; }}
@media (max-width: 736px) {
	.article #one { background-color: var(--bleu_fonce2); }
	.article .box { margin: 0; background-color: transparent; box-shadow: none;}
}
@media (max-width: 479px){ 
	.article .flex_list li { padding: 0; }
	.article article .descriptif { width: 90%;  }
}

/* Les documents
-----------------------------------------------*/

/* Le portfolio */
#documents_portfolio a {margin:0;padding:0;border:0 !important;box-shadow:none;}
#documents_portfolio ul { list-style: none; padding: 0; }

/* Les documents joints */
.documents_joints ul {list-style:disc;}
.documents_joints a {border:0;}
.documents_joints a:focus, .documents_joints a:hover, .documents_joints a:active {background-color:transparent;color:inherit;text-decoration: underline;}


/* FOOTER
-----------------------------------------------*/
#footer { color: var(--bleu_fonce2) /*var(--fonce1)*/;}
#footer big { line-height: 1.5em; }
#footer .copyright { color: var(--bleu_fonce2) /*var(--fonce1)*/; font-size: 1em; letter-spacing: 0.225em; line-height: 1.3em; list-style: none; padding: 0; text-transform: lowercase; text-align: right; border-top: 1px solid var(--bleu_fonce2) /*var(--fonce1)*/; margin-top: .8em; padding: .8em 0;}
@media (min-width: 736px) {
	#footer .copyright li { border-left: solid 1px var(--bleu_fonce2) /*var(--fonce1)*/;}
}

/* FORMULAIRES
-----------------------------------------------*/ 
/* inclus */
input[type="checkbox"] + label, input[type="radio"] + label {padding-left: 2.4em !important ; position: relative;}
/* Formulaire de contact  */
#three form { margin: 0; }
label[for=infolettre] {display: flex;}
label[for=infolettre] p {margin: 0 ;}
input#infolettre {z-index:auto;margin:0 1em 0 0;opacity:1;-moz-appearance:checkbox;-webkit-appearance:checkbox;-ms-appearance:checkbox;appearance:checkbox;}
.formulaire_spip ul {margin:0;padding:0;list-style:none;}
.formulaire_spip ul li {padding:0;}
.formulaire_spip .editer {margin-bottom: 1em;}
/* inclus */
.formulaire_spip { font-size: .9em}
.formulaire_spip .editer { text-indent: 0}
.formulaire_spip label { display: inline-block; width: 140px; margin: 0 10px 0 0; color: var(--fond2); padding: 0; font-size: 1.1em; line-height: 1.3em; font-weight: normal; text-align: right; vertical-align: middle;  letter-spacing: 0.225em; text-transform: lowercase;  } 
.formulaire_spip .saisie_textarea label { vertical-align: top}
.formulaire_spip input, .formulaire_spip textarea, .formulaire_spip select { display: inline-block; width: calc(99% - 152px); background-color: var(--fond1); color: var(--bleu_fonce3); }
.formulaire_spip input, .formulaire_spip select { height: 2.3rem; }
.formulaire_spip textarea { height: 2.3rem; min-height: 2.3rem; max-width: calc(99% - 152px); min-width: calc(99% - 152px); padding: .2em 1em; }
input[type="checkbox"] + label:before, input[type="radio"] + label:before, input[type="text"], input[type="password"], input[type="email"], select, textarea { background-color: $white; color: $grayDarker}
input[type="submit"], input[type="reset"], input[type="button"], button, .button { letter-spacing: normal}
.formulaire_spip .editer { padding: 0}
.formulaire_spip label .obligatoire { display: none}
.formulaire_newsletter_subscribe label { width: 148px}
@media (max-width: 480px) {
	.formulaire_spip label, .formulaire_newsletter_subscribe label { width: auto; text-align: left}
	.formulaire_spip input, .formulaire_spip textarea, .formulaire_spip select { width: 99%}
}
/* boutons */
button, .button { background-color: var(--fond2); -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; border-radius: 6px; border: 0; color: var(--fonce1); font-size: 1.1em; letter-spacing: 0.225em; text-transform: lowercase;  cursor: pointer; display: inline-block; font-weight: 400; height: 2.3rem; line-height: 2.3rem; padding: 0 2em; text-align: center; text-decoration: none; white-space: nowrap;}
button:hover, .button:hover { background-color: var(--vert); color: var(--rouge) }


/* PAGINATION
-----------------------------------------------*/ 
.pagination { margin: 1em 0; }
.pagination ul { margin: 0; }
.pagination.gauche .pagination-items { justify-content: flex-start; padding: 0; gap: 5px; }
.pagination .pagination-items {list-style: none;display: flex;flex-wrap: wrap; flex-direction: row; justify-content: center}
.pagination .pagination-item { margin: 0; padding: 0; flex-basis: 5.5%; display: flex; align-items: center; }
.pagination .pagination_precedent_suivant .pagination-item { flex-basis: auto;}
.pagination .pagination-item-label { display:block; flex-basis: 100%; padding: 5px 10px; margin: 0;text-decoration: none; text-align: center; border-radius: 0; border: 0; box-shadow: inset 0 0 0 2px #e5e5e5; background: rgba(255,255,255,.5) ; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; color: #126b74; font-weight: normal;  }
.pagination .on .pagination-item-label,
.pagination a.pagination-item-label:hover,
.pagination a.pagination-item-label:focus,
.pagination a.pagination-item-label:active { font-weight: normal; background-color:  var(--vert); color: #777; box-shadow: none; }
.pagination .on .pagination-item-label {background-color:  var(--vert) /*#e89980*/; box-shadow: none; color: white;}
.pagination .pagination_precedent_suivant .disabled {visibility: hidden}
.pagination .pagination-item.disabled {}
.pagination .pagination-item.disabled .pagination-item-label {color:#888; font-weight: normal;}


/* Classe invisible */
.texte-invisible {display:block;color:transparent;text-indent:-9999em;}
.invisible {position:absolute;left:-999em;height:1%;}

/* Fix tiny typo */
.box {border:0;}

/* barre admin spip  */
#spip-admin {bottom: 0;top: auto; z-index: 1001;}



@media (min-width: 1680px){}
/* wide */ 
@media (min-width: 1280px) and (max-width: 1680px){}
/* normal */ 
@media (min-width: 980px) and (max-width: 1279px){}
/* narrow */ 
@media (min-width: 840px) and (max-width: 979px){}
/* narrower */ 
@media (min-width: 736px) and (max-width: 839px){}
/* mobile */ 
@media (min-width: 480px) and (max-width: 735px){}
/* mobilep */ 
@media (max-width: 479px){}