/*****************
* Responsive Design - Smartphone (vertical)
*****************/

@media only screen and (max-width: 599px) {
	body {
		width: 92vw;
		margin: 0 auto;
		background: transparent;
		font-size: 3.5vw;
	}

	.fas {
		font-size: 5vw;
		margin-right: 0.5vw;
	}

	#content .col4 h4 {
		padding: 3vw;
		font-size: 3.4vw;
		border-left: 3vw solid #ff6300;
	}

	h5 {
		font-size: 3.6vw;
		margin: 7vw 0 0 0;
		padding: 0 0 1vw 0;
	}

	h6 {
		font-size: 3.6vw;
		margin: 4vw 0 2vw 0;
	}

	#banner, #container, #footer {
		width: 100%;
	}

	#banner {
		display: block;
		font-size: 3.5vw;
		margin: 8vw auto 0;
	}

	#banner .logo {width: 31vw;}

	#banner img {margin: -2vw 0 0 1vw;}
	
	#banner img:hover {
		transform: scale(1);
	}

	#banner .col {
		width: 28vw;
		margin: 0 0 0 4vw;
		line-height: 1.8;
	}

	#banner .col6 {
		position: relative;
		top: -72.5vw;
		right: 0;
		width: 55vw;
		margin: 0;
		line-height: 1.6;
	}

	#banner .col5 {margin: 0;}

	#banner h2 {
		margin-bottom: 2.5vw;
		padding-bottom: 1vw;
		font-size: 4vw;
	}

	#banner h3 {font-size: 3.5vw;}

	#banner .fas {
		width: 6vw;
		font-size: 4.5vw;
	}

	#banner input, #banner select, #banner textarea {font-size: 3.5vw;}

	#banner form, #banner .col6 a {width: 40vw;}

	.main-menu {
		width: 100%;
		height: 38vw;
		margin: 5vw 0 0 0;
	}

	#tools_infos {
		margin: 0 0 2.5vw 0;
		padding-bottom: 1vw;
	}

	#container {margin: 0 auto;}

	#menu-container, #menu {
		width: 100%; 
		margin: 3vw 0 0 0;
	}
	
	.col2 #menu-container, #menu {
		margin: 0;
	}

	.col2 #content object,
	.col2 #content embed {
		height: 92vw;
		width: 92vw;
	}

	#content .col2 {
		font-size: 3.7vw;
	}

	#menu h3,
	#sous-menu,
	.col3 #menu:first-child,
	.col3 #sous-menu.on,
	.col6 #menu ul {display: none;}

	.col2 #menu li {
		padding: 0;
		margin: 0 0 3vw 0;
		border-bottom: none;
		width: 100%;
	}

	.col2 .menu-image {
		float: left;
		width: 50%;
		height: auto;
		line-height: 0;
	}

	#sous-menu.on,
	.col6 #sous-menu,
	.col6 #menu h3 {display: block;}

	.col6 #menu h3 {
		font-weight: normal;
		max-width: none;
	}

	.col6 #menu {
		background-image: url(../img/stripes-vert.png);
		background-repeat: repeat;
		border-bottom: 1px solid #00ae96;
		padding: 3vw 3.5vw;
		box-sizing: border-box;
	}

	.col6 #sous-menu.on {background-image: none;}

	#menu h4, .col6 #menu h3 {
		font-size: 3.5vw;
		line-height: 1.8;
	}

	.col2 #menu h2 {
		padding: 0 0 1.3vw 0;
		margin: 3vw 0 0 0;
		border-top: none;
		display: block;
	}

	.col2 #menu h4 {
		font-size: 3.8vw;
		width: 50%;
		float: right;
		padding: 0 3vw;
		box-sizing: border-box;
	}

	.col6 #menu h3 {
		margin: 0;
		padding: 0;
	}

	.col2 #menu p {
		padding: 2vw 3vw;
		font-size: 3vw;
		width: 100%;
		box-sizing: border-box;
	}

	.col2 h2 small {
		font-size: 4.2vw;
	}

	#menu ul {padding: 3vw 3.5vw;}

	#menu ul.last {border-bottom: 1px solid;}

	.col3 #menu ul.last {border-color: #e2007a;}
	.col4 #menu ul.last {border-color: #ff6300;}
	.col5 #menu ul.last {border-color: #0899e2;}
	.col6 #menu ul.last {border-color: #00ae96;}

	#no-menu-responsive, .col6 #sous-menu-fleche.on {display: none;}

	.col5 #sous-menu-fleche.on {
		border-left: 7vw solid transparent;
		border-right: 7vw solid transparent;
		border-top: 7vw solid #0899e2;
	}

	.col4 #sous-menu-fleche.on {
		border-left: 7vw solid transparent;
		border-right: 7vw solid transparent;
		border-top: 7vw solid #ff6300;
	}

	.col6 #fleche-responsive {
		width: 0;
		height: 0;
		border-left: 7vw solid transparent;
		border-right: 7vw solid transparent;
		border-top: 7vw solid #00ae96;
		float: right;
		margin: -3vw -3.4vw;
	}

	.plan-rub {
		padding: 1.5vw 0;
	}

	.plan-rub td {
		font-size: 3.5vw;
		padding: 1.5vw 0 1.5vw 3vw;
	}

	.plan-rub a {
		padding: 2vw;
	}

	#container .col2 #content h2 {
		font-size: 5.7vw;
		padding: 4vw 3vw;
		line-height: 1.3;
		margin: 0;
	}
	
	#container .col2 #content button {
		font-size: 4.5vw;
		padding: 2.5vw;
		margin-bottom: 2.5vw;
	}

	#content .col3 .row h3, #content .col4 .row h3 {
		margin: 0;
		font-size: 3.8vw;
	}

	#content .col3 .row .preview-video h3 {font-size: 4vw;}

	#content .row h3 {font-size: 4vw;}

	#content .col3 .logo img {
		width: 100%;
		height: auto;
	}

	#rubrique-content, #content {
		width: 100%;
		margin: 5vw 0 0 0;
	}

	#rubrique-content p, #content p {margin: 0 0 4vw 0;}
	#content .resume {font-size: 3vw; margin: 1.5vw 0 0 0;}

	#menu h2, #aside h2, #container h2 {
		font-size: 6vw;
		padding: 0 0 2vw 0;
	}

	#content-aside-container {
		float: none;
	}

	#aside-container {
		float: none;
		width: auto;
		margin: 0;
	}

	#aside {
		width: 100%;
	}

	#aside .bloc {margin: 3vw 0;}
	#aside h2 {margin: 2vw 0 4vw 0;}
	#aside form {margin: 1.5vw 0 3vw 0;}
	#aside input, #aside select, #aside textarea {height: 9.8vw;}

	input, select, textarea {padding-left: 2vw;}

	.col4 .annu_vignette img {
		width: 30vw;
		height : auto;
	}
	
	.col4 .annu_discipline {
		width: 62vw;
	}
	
	.col4 .annu_titre {
		font-size: 3.5vw;
		margin: 2.5vw;
		padding-top: 2vw;
	}

	.spip_documents_left img[width="140"] {
		margin-bottom: -8vw;
		width: 40vw;
		height: auto;
	}

	.col3 .spip_documents_right {
		width: 45vw;
		margin-bottom: 6vw;
		padding-top: 10vw;
	}

	.col4 .spip_documents_right {
		margin-bottom: 6vw;
		width: 25vw;
		height: auto;
	}

	.col4 .spip_documents_right img {
		width: 25vw;
		height: auto;
	}

	.col3 .preview, .col5 .preview {margin: 6vw 0;}

	.col3 .abstract {
		width: 43vw;
	}

	.col4 .abstract {
		width: 62vw;
	}

	.col2 .date {font-size: 3.8vw;}

	.abstract .date, .abstract .lieu {font-size: 3vw;}
	.abstract .categorie {font-size: 3.8vw; margin: 1.5vw 0;}

	.informations .date {font-size: 3.8vw;}
	.informations .lieu {font-size: 3.5vw;}
	.informations .categorie {font-size: 5vw; margin: 1vw 0 0 0;}

	.abstract-text a {display: none;}

	.abstract-text h3 a {display: block;}

	.spip_documents_left {
		width: 100% !important;
		margin-right: 0;
		margin-bottom: 4vw;
	}

	.col3 .preview img {
		width: 100%;
		height: auto;
	}

	.col3 .informations, .col2 .informations {padding: 4.2vw;}

	.col2 hr, .col3 hr {margin: 6vw 0 5vw 0;}

	.col3 h4 {
		font-size: 4vw;
		padding: 3vw;
	}

	#content .spip_document_titre, .spip_doc_titre {font-size: 3vw;}

	#content .spip_document_titre span, .spip_doc_titre span, .spip_document_descriptif, .spip_doc_descriptif {font-size: 2.5vw;}

	.preview .spip_documents_right_videos {margin: 4vw 0 8vw 0;}

	.preview .spip_documents_right_videos img {max-width: none;}

	.preview-video .iframe-container {margin-bottom: 8vw;}

	.iframe-container {
		position: relative;
		overflow: hidden;
		padding-top: 56.25%;
		margin-bottom: 0;
		background: black;
	}

	.iframe-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}
	
	iframe {
		width: 92vw !important;
	}

	img[width='480'] {
		width: 100%;
		height: auto;
	}

	.col6 img[width='89'], .col6 img[width='90'] {
		width: 25vw;
		height: auto;
		padding-right: 4vw;
	}

	.col6 img[width='480'] {
		width: 92vw;
		height: auto;
	}

	.col6 .spip_documents_left {width: auto !important;}

	.col6 #rubrique-content {
		text-align: left;
		hyphens: none;
	}

	.sommaire #container img {
		width: 100%;
		height: auto;
		margin: 0 !important;
		display: block;
	}

	.sommaire #container .puce {
		width: auto;
		display: inline;
	}

	#headK, #headO, #headT {display: none;}

	#headA, #headH, #headJ, #headP, #headZ, #headgroup1, #headgroup2, #headgroup4 {
		width: 100%;
		height: auto;
	}

	#headgroup1 {
		width: 28vw;
		float: left;
	}

	#headgroup3 {
		width: 100%;
		height: 60vw;
	}

	#headgroup2, #headgroup3, #headJ, #headP {
		padding-top: 0;
		padding-right: 0;
	}

	#headE, #headR {margin-top: 0;}

	#headL, #headL:hover {
		transform: translate(64vw, -32vw);
		margin: 0;
	}

	#headN {
		margin: 0;
		top: -60vw;
		position: relative;
	}

	#headgroup0 {
		width: 100%;
	}

	#headgroup1, #headgroup2, #headgroup3, #headgroup4, #headgroup5, #headA, #headB , #headD, #headH, #headJ, #headM, #headP, #headY {margin-top: 4vw;}

	#headgroup1, #headgroup1-1, #headgroup2, #headgroup4 {overflow: hidden;}

	#headgroup1, #headgroup3, #headgroup4 {position: relative;}

	#headC, #headH, #headL, #headM {
		width: 28vw;
		height: 28vw;
	}

	#headY {
		display: block;
	}

	#headV, #headW, #headX {
		width: 44vw;
		height: 44vw;
	}

	#headV, #headX {
		float: left;
	}

	#headW {
		float: right;
		margin-top: 0;
	}

	#headD, #headE, #headF, #headQ, #headS {
		width: 60vw;
		height: auto;
	}

	#headC, #headE, #headQ {float: left;}

	#headG, #headH, #headR, #headS, #headT, #headgroup5 {float: right;}

	#headB, #headN, #headR {
		width: 28vw;
		padding-top: 28vw;
		height: auto;
	}

	#headN {
		margin-right: 4vw;
	}

	#headI {
		width: 28vw;
		padding-top: 28vw;
		margin-top: 4vw;
		height: auto;
	}

	#headG, #headY {
		width: 28vw;
		padding-top: 28vw;
		height: auto;
	}

	#headZ {
		margin-bottom: 2vw;
	}

	#headZ .illus {
		width: 50%;
		display: inline-block;
	}

	.col3 #headZ .illus {
		width: 20vw;
	}

	#headZ img {
		width: 100%;
	}

	#headA .sommaire-title-container:before {
		top: -17vw;
		left: -4vw;
		width: 40vw;
		height: 40vw;
	}

	#headJ .sommaire-title-container:before {
		top: -5vw;
		left: 3vw;
		width: 33vw;
		height: 33vw;
	}

	#headP .sommaire-title-container:before {
		top: -15vw;
		left: 14vw;
		width: 40vw;
		height: 40vw;
	}

	#headL .sommaire-title-container:before {
		width: 14vw;
		height: 14vw;
		top: -11px;
		right: -4vw;
		display: block;
	}
	
	#headM .sommaire-title-container:before,
	#headD .sommaire-title-container:before {
		display: none;
	}

	#headQ .sommaire-title-container:before {
		background-color: #ccc;
		width: 22vw;
		height: 22vw;
		top: 3vw;
		right: -13vw;
	}

	#headS .sommaire-title-container:before {
		width: 25vw;
		height: 25vw;
	}

	#headD .sommaire-title-container:before {
		top: -3vw;
		left: 42vw;
	}

	#headS .sommaire-title-container:before {
		top: -4vw;
		left: -6vw;
		display: block;
	}

	#headW .sommaire-title-container:before {
		width: 28vw;
		height: 28vw;
		top: 14vw;
		left: 10vw;
	}

	#headX .sommaire-title-container:before {
		top: 20vw;
		left: -10vw;
		width: 32vw;
		height: 32vw;
	}

	#headA .sommaire-title-container,
	#headJ .sommaire-title-container,
	#headP .sommaire-title-container {
		height: 35vw;
		padding: 3.6vw 5vw;
	}

	#headV .sommaire-title-container,
	#headW .sommaire-title-container,
	#headX .sommaire-title-container {padding: 2.5vw 3vw;}

	#headC .sommaire-title-container,
	#headH .sommaire-title-container,
	#headL .sommaire-title-container,
	#headM .sommaire-title-container {padding: 2vw;}

	#headD .sommaire-title-container,
	#headE .sommaire-title-container,
	#headF .sommaire-title-container,
	#headQ .sommaire-title-container,
	#headS .sommaire-title-container {
		padding: 2vw 3vw;
		height: 28vw;
	}

	#headZ .sommaire-title-container {
		width: 50%;
		position: relative;
		float: right;
		height: 46vw;
		padding: 3vw 3.5vw;
	}

	.col3 #headZ .sommaire-title-container {
		width: 66vw;
		height: 20vw;
		padding: 0;
		border: 0;
		overflow: visible;
	}

	#headZ:hover .sommaire-title-container {
		background-color: rgba(255, 255, 255, 1);
		height: 46vw;
	}

	#menu .col3	#headZ:hover .sommaire-title-container {
		height: 20vw;
	}

	#menu #headZ h2 {
		font-size: 4.3vw;
		padding: 0 0 2.1vw 0;
		margin: 0 0 2.2vw 0;
		display: block;
	}	

	#menu .col3 #headZ h2 {
		font-size: 3.5vw;
		padding: 0 0 1.5vw 0;
		margin: 0 0 1.5vw 0;
	}	

	#menu #headZ h3 {
		font-size: 3.8vw;
		display: block;
	}
	
	#menu .col3 #headZ h3 {
		font-size: 3.2vw;
		line-height: 1.3;
	}

	#menu .col3 #headZ {
		margin: 1vw 0 0 0;
	}

	#menu .col3 #headZ i {
		top: -3vw;
		left: -11vw;
		font-size: 9vw;
		background-color: white;
		border-radius: 10vw;
		border: 1px solid white;
		width: 9vw;
		height: 9vw;
	}

	#menu .informations {
		padding: 3vw;
	}

	#headA:hover h2, #headA:hover h3,
	#headC:hover h2, #headC:hover h3,
	#headD:hover h2, #headD:hover h3,
	#headE:hover h2, #headE:hover h3,
	#headF:hover h2, #headF:hover h3,
	#headH:hover h2, #headH:hover h3,
	#headJ:hover h2, #headJ:hover h3,
	#headL:hover h2, #headL:hover h3,
	#headM:hover h2, #headM:hover h3,
	#headP:hover h2, #headP:hover h3,
	#headQ:hover h2, #headQ:hover h3,
	#headS:hover h2, #headS:hover h3,
	#menu #headZ:hover h2, #menu #headZ:hover h3,
	.preview-title-container:hover a {
		opacity: 1; 
	}

	#headA:hover .sommaire-title-container,
	#headJ:hover .sommaire-title-container,
	#headP:hover .sommaire-title-container {
		background-color: rgba(255, 255, 255, 0.9);
		height: 35vw;
	}
	
	#headD:hover .sommaire-title-container,
	#headE:hover .sommaire-title-container,
	#headF:hover .sommaire-title-container,
	#headQ:hover .sommaire-title-container,
	#headS:hover .sommaire-title-container {
		background-color: rgba(255, 255, 255, 0.9);
		height: 28vw;
	}
	
	#headC:hover .sommaire-title-container,
	#headH:hover .sommaire-title-container,
	#headL:hover .sommaire-title-container,
	#headM:hover .sommaire-title-container {
		background-color: rgba(255, 255, 255, 0.9);
	}
	
	.preview-title-tile:hover .preview-title-container {
		background-color: rgba(255, 255, 255, 0.9);
		height: 45%;
	}
	
	#headA:hover, #headC:hover, #headD:hover, #headE:hover, 
	#headF:hover, #headH:hover, #headJ:hover, #headM:hover, 
	#headP:hover, #headQ:hover, #headS:hover, 
	#headV:hover, #headW:hover, #headX:hover, #headZ:hover,
	.preview-title-tile:hover {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}

	#headD h2, #headC h2, #headE h2, #headF h2, #headH h2, #headL h2, #headM h2, #headQ h2, #headS h2 {
		font-size: 3.4vw;
		padding-bottom: 0.8vw;
		margin: 0 0 1.2vw 0;
		border-bottom: 2px solid;
	}

	#headV h2 {
		font-size: 4.3vw;
		margin: 0 0 2.2vw 0;
		padding: 0;
		line-height: 5.2vw;
	}

	#headW h2, #headX h2 {
		font-size: 4.3vw;
		padding-bottom: 2.2vw;
		margin: 0 0 1.8vw 0;
		line-height: 5.2vw;
	}
	
	#headD h3, #headE h3, #headF h3, #headQ h3, #headS h3 {
		font-size: 3.2vw;
	}

	#headV h3, #headW h3, #headX h3 {
		font-size: 5vw;
	}

	#headV h3 {
		display: block;
	}

	#headC h3, #headH h3, #headL h3, #headM h3 {
		font-size: 3vw;
		height: 14vw;
		overflow: hidden;
	}

	#headV h3 a {
		width: 100%;
		height: auto;
		padding: 1.8vw 0;
		font-size: 4vw;
		margin: 0;
		border-bottom: 0;
		border-right: 0;
		border-left: 0;
		line-height: 1.2;
	}

	#headV h3 a:hover, #headW .sommaire-title-container:hover {
		background-image: none;
	}

	#headV h3 i {
		font-size: 7vw;
		top: 6vw;
		right: 0;
		bottom: auto;
	}

	#headV h3 small {
		font-size: 2.7vw;
	}

	#headC .sommaire-title-container:hover h2, #headC .sommaire-title-container:hover h3,
	#headH .sommaire-title-container:hover h2, #headH .sommaire-title-container:hover h3,
	#headL .sommaire-title-container:hover h2, #headL .sommaire-title-container:hover h3,
	#headM .sommaire-title-container:hover h2, #headM .sommaire-title-container:hover h3 {
		opacity: 1;
	}

	#headV .sommaire-title-container:hover h2, #headV .sommaire-title-container:hover h3,
	#headW .sommaire-title-container:hover h2, #headW .sommaire-title-container:hover h3,
	#headX .sommaire-title-container:hover h2, #headX .sommaire-title-container:hover h3 {
		color: #3a3a40;
	}

	.preview-title {width: 100%;}

	.preview-title-container {padding: 3.5vw;}

	.preview-title-tile-text {
		width: 45vw;
		height: 45vw;
		padding: 4vw;
		font-size: 2.2vw;
		margin: 5vw 0 0 0;
		hyphens: auto;
	}

	.preview-title-tile {
		width: 45vw;
		height: 45vw;
	}

	.preview-title-tile:nth-child(1), .preview-title-tile:nth-child(2) {margin: 5vw 0 0 0;}
	.preview-title-tile:nth-child(2n+1)	{float: left;}
	.preview-title-tile:nth-child(2n) {float: right;}
	.preview-title-tile:nth-child(n+3) {margin: 2.3vw 0 0 0;}

	.preview-title-tile img {
		width: 100%;
		height: auto;
	}

	#container #rubrique-content .preview-title-container h3 a {
		font-size: 3vw;
		padding-bottom: 1vw;
	}

	#headA h2, #headJ h2, #headP h2 {
		padding: 0 0 2vw 0;
		margin: 0 0 2vw 0;
		font-size: 5.1vw;
	}

	#headA h3, #headJ h3, #headP h3 {
		font-size: 4.2vw;
		margin: 0 20vw 0 0;
	}

	.portfolio-item, .portfolio-item:nth-child(4n) {margin: 0 1.5vw 0 0;}

	.portfolio-item:nth-child(3n) {margin: 0;}

	.portfolio-item img {
		width: 29.6vw;
		border: none;
	}

	.portfolio-item:hover {
		transform: scale(1);
	}

	.portfolio-item:hover img {
		border: none;
	}

	#rubrique-content h3, #content h3 {margin: 4vw 0 0 0;}

	#content .rub0 h3 {font-size: 4vw;}

	.warning {
		padding: 3vw 0 0 0;
		font-size: 6.5vw;
	}

	.rub0 img {
		width: 100%;
		height: auto;
		margin: 0 0 4vw 0;
	}

	.rub0 ul {
		font-size: 3.5vw;
		padding-left: 4.5vw;
	}

	.rub0 ul li {
		margin-bottom: 2vw;
	}

	.sep {padding: 0 1.5vw;}
	.pagination {font-size: 4vw;}

	#footer {
		margin: 4vw auto 8vw;
		padding: 3vw 0 0 0;
		font-size: 2.5vw;
		line-height: 1.3;
	}

	#footer .logo {
		padding: 0.7vw 0 0 2vw;
		height: 11vw;
		width: 29vw;
	}

	#footer .adresse {
		width: 40vw;
		padding: 0.2vw 0 0 2vw;
		height: 10.9vw;
		line-height: 1.3;
	}

	#footer .social {
		width: 18vw;
		padding-left: 2vw;
		height: 11vw;
	}

	#footer .fb {font-size: 5vw;}

	#footer .credit {padding: 0;}

	#footer .fb .fa-instagram {
		font-size: 5.5vw;
		top: 0.2vw;
	}

	#footer img {width: 23vw;}
}