/*
Theme Name: Class Action
Theme URI: https://git.laquadrature.net/UneGrange/
Author: Marne & Oncela
Author URI: https://git.laquadrature.net/UneGrange/
Description: A basic, colorful & propaganda-style theme used by La Quadrature du Net for simple advocating websites, mainly used within a single page.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: strong, one-column, flexible-width, one-page
Text Domain: lqdn-one

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

* ============================================================================ */ 

/* Fonts */

@font-face {
    font-family: nner-Book;
    src: url(font/nner-Book.otf);
}
@font-face {
    font-family: nner-Black;
    src: url(font/nner-Black.otf);
}
@font-face {
    font-family: nner-Bold;
    src: url(font/nner-Bold.otf);
}

@font-face
{
  font-family: FontAwesome;
	src: url("font/FontAwesome.otf");
}

/* Colors */

.intro, .form
{
	background: white;
}

.google
{
	background: #ec2024;
	color: #ec2024;
}

.apple
{
	background: #bdbdbd;
	color: #000;
}

.facebook
{
	background: #32518e;
	color: #32518e;
}

.amazon
{
	background: #f7981d;
	color: #f7981d;
}

.microsoft
{
	background: #82c341;
	color: #82c341;
}

/* Body */

body 
{
	font-family: nner-Black;
	text-align:center;
	width: 50%;
	margin: 0 25%;
	scroll-behavior: smooth;
	background: #ddd;
}

/* Menu */

nav 
{
	width : 100vw;
	background-color:black;
	position:fixed;
	top:0;
	left:0;
	padding: .6% 0% .6% 0%;
}

nav a
{
	color:white;
	font-family:"nner-Book";
	font-size: 1.15em;
	margin: 0% 1.25% 0% 1.25%;
}

nav a:first-child
{
	margin-left: .2%;
}

nav .large 
{
  display:inline;
}

nav .small
{
  display:none;	
}

/* Posters */

.hanchor
{
	width: 0px;
	height: 1px;
}

section 
{
	margin: 12% 0% 6% 0%;
}

img.title
{
	margin:0;
	padding: 0;
	display: block;
}

/* Video */


.video {
	width: 100%;
	height: 50vh;	
	margin: 0;
	padding: 0;
}

/* Content */

.content 
{
	color: black;
	padding: 4% 3%;

	text-align:left;
	font-family:"nner-Book";
	margin: 1vw 3vw;
	font-size: 1.3em;
	line-height:1.5;
}

.content a
{
	text-decoration: underline;
}

/* Intro & Formulaire */
.form {
	display:none;
}
.intro, .form
{
	.margin-left : 3px;
	.margin-right : 3px;
	
	.outline: 6px solid black;
  .outline-offset: -3px;
}

#info input
{
  display: block;
  margin: .2em 0 1em;
}

#info
{
	margin-bottom: 1.5em;
}

#services
{
	color: gray;
}

#services label
{
  	line-height: 2em;
	background: none;
}

#submit {
	border: solid black 1px;
	background: white !important;
	-webkit-appearance: none;
	font-family: "nner-Black";
	text-transform: uppercase;
	font-size : 1em;
	padding:1% 3% 1% 3%;
	margin: 2em 0 .4em;
	display: block;
	color: black;
	cursor: pointer;
	border-radius: 0 !important;
}

label 
{
	cursor: pointer;
}
#info label {
	cursor: initial;
}
#info label:hover {
	opacity:1;
}

/* Popup */

	.tab-check 
	{
	  position: absolute;
	  opacity: 0;
	  z-index: -1;
	}

	.tab-content, .tab-back
	{
	  display: none;
  }

  input:checked + .tab .tab-content 
	{
		display: block;
		position: fixed;
		width: 50%;
		max-height: 90%;
		top: 7%;;
		z-index: 10;
		left: 25%;
		background: white;
		overflow: auto;
		padding: 1em 2em;
		box-sizing: border-box;
		font-size: .9em;
	}
	
	input:checked + .tab .tab-back
	{
		display: block;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 0;
		background: black;
		opacity: .8;
	}

	.tab-label::after 
	{
	  content: " ▸";
	}

/* Misc. */

a 
{
	text-decoration:none;
	color:inherit;
}

a:hover, #submit:hover, label:hover
{
	opacity:0.6;
}

a.off
{
	opacity: .3;
}

a.off:hover
{
	cursor: default;
}

b
{
	font-weight: normal;
  font-family:"nner-Bold";
}

i
{
	font-size: .8em;
}

/* Press */

.press .title
{
	text-transform: uppercase;
	font-weight: normal;
	font-size: 2.6em;
	margin: 0 0 5%;
	background: white;
}

.press img
{
  margin: .8em 1.8em;	
}

/* Footer */

footer {
	width:100%;
	background-color:black;
	padding-top: 0.5%;
	margin-top: 4%;
}
.act {
	width: 36.6%;
}
.lqdn img {
	width: 35.1% ;
}
.soutenir img {
	width: 26.1%;
}
footer img {
	display:inline;
}

/* Affiches */

.affichez a.download {
    width: 20%;
    display: block;
    box-sizing: border-box;
    text-align: center;
    color: white;
    background: black;
    overflow: hidden;
	font-family: nner-Book;
	margin: 0 40% 0 40%;
	padding: 0.3em;
	font-size:1.3em;
}

/* Media query */

@media(max-width:1260px) {

	body 
	{
	 width: 90%;
	 margin-left: 5%;
	 margin-right: 5%;
	}
	
	.intro
	{
		margin-top: 5%;
	}
	
	nav .large
	{
		display: none;
	}
	
	nav .small
	{
		 display: none;	
	}
	
	nav 
	{
		padding: 1% 0% 1% 0%;
		display:none;
	}
	
  input:checked + .tab .tab-content 
	{
		width: 90%;
		max-height: 80%;
		top: 5%;;
		left: 5%;
	}
	
}

 @media (min-width: 1500px)
 {
 	body
 	{
 		width: 38%;
 		margin-left: 31%;
 	}
 }

@media (max-width: 1000px) and (orientation: portrait) and (max-device-width: 1000px)  
{
	
	html 
	{
	 font-size: 200%;
	}
	
	#info input
	{
	  width: 40%;
	  font-size: 1em;
	}
	
	input[type=checkbox]
	{
		-webkit-appearance: none;
		-moz-appearance: none;
		width: 3.4em;
		height: 3.4em;
		border: 1px black solid;
	}
	
	.services label
	{
		font-size: 1.2em;
		line-height: 1.2em;
	}
	
	input[type=checkbox]:checked
	{
		background: black;
	}

}