/* 
Theme Name: SF 
Theme URI: https://www.agence-webmaster.com 
Description: theme created by Mathieu RIANDET. 
Version: 1.0 
Author: Mathieu RIANDET   
Creation Theme by Mathieu RIANDET  || https://www.agence-webmaster.com
Text Domain : SF  
*/

@font-face {
    font-family: 'OddPress';
    src: url('./assets/fonts/oddpress-webfont.ttf'),
		 url('./assets/fonts/oddpress-webfont.woff2') format('woff2'),
         url('./assets/fonts/oddpress-webfont.woff') format('woff');
	font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'neuropol';
    src: url('./assets/fonts/neuropol-webfont.ttf'),
		 url('./assets/fonts/neuropol-webfont.woff2') format('woff2'),
         url('./assets/fonts/neuropol-webfont.woff') format('woff');
	font-weight: normal;
    font-style: normal;
}


body{
	font-family: "Poppins", sans-serif;
	font-size : 1rem;
	color : white;
}

.wrapper {
	position : relative;
}

.section{
	background-color : rgba(0,0,0,.5);
}

.section,.blog{
	margin-top : 20px;
	margin-bottom : 20px;
	padding-bottom : 20px;
}

a, a:hover{
	text-decoration : none;
}

a{
	color : rgba(237,28,36,1);
	transition : all .5s;
} 

a:hover{
	color : rgba(255,242,0,1);
}

h1, .h1{
	display: block;
	text-align : center;
	margin-bottom : 5px;
	margin-top : 5px;
}

h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6,.h6{

}

input, textarea{
	max-width : 100%;
}

figure {
    margin: 0;
}

.btn{
	color : rgba(255,255,255,1);
	border-color : rgba(237,28,36,1)!important;
	background-color :  rgba(237,28,36,.7)!important;
	transition : all .5s linear;
}

.btn:hover,
.btn:active,
.btn:focus
{
	color : rgba(255,255,255,.8);
	background-color :  rgba(237,28,36,1)!important;
	box-shadow: 0 0 0 0.2rem rgba(237,28,36,.25);
	outline: 0;
}

.btn a{
	color : rgba(255,255,255,1);
}

.btn a:hover,
.btn a:active,
.btn a:focus{
	color : rgba(255,255,255,.8);
}

.alert {
    color: rgba(237,28,36,1);
    background-color: rgba(237,28,36,.25);
    border-color: rgba(237,28,36,1);
}

.text-truncate{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-white{
	color : white;
}

.text-main{
	color : rgba(237,28,36,1);
}

.text-second{
	color : rgba(255,242,0,1);
}

.bg-main{
	background-color : rgba(237,28,36,1);
}

.bg-second{
	background-color : rgba(255,242,0,1);
}

.bg-main-shadow{
	background-color : rgba(237,28,36,.25);
}

.bg-second-shadow{
	background-color : rgba(255,242,0,.25);
}

.border-main{
	border : 1px solid rgba(237,28,36,1);
}

.border-second{
	border : 1px solid rgba(255,242,0,1);
}

img{
	max-width : 100%;
	height : auto;
}

.img-cover{
	width : 100%;
	height : 100%;
	object-fit : cover;
}



/*
*	Commentaires
*/

ol{
	list-style-type: none;
}

/*
*	pagination
*/

.page-link{
	color : rgba(255,255,255,1);
	background-color: rgba(216,106,52,.7);
    border-color: rgba(237,28,36,.7);
}

li:not(.active)>.page-link:hover,
li:not(.active)>.page-link:focus {
    color : rgba(255,255,255,1);
	background-color: rgba(237,28,36,.7);
    border-color: rgba(237,28,36,1);
	text-decoration: none;
    box-shadow: 0 0 0 0.2rem rgba(237,28,36,.25);
	outline: 0;
	z-index: 2;
}

.page-item.active .page-link {
    cursor : default;
	color: rgba(216,106,52,1);
    background-color: rgba(237,28,36,1);
	border-color: rgba(237,28,36,1);
}

/*
*	input
*/

.input-group span{
	color : rgba(255,255,255,1);
	background-color: rgba(237,28,36,.7);
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: rgba(237,28,36,1);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(237,28,36,.25);
}

label{
	display : block;
}

input {
	max-width : 100%;
}


/*
*	Logo/Description
*/


.main-header{
	position : relative;
	padding-bottom : 15px;
	z-index : 50;
}

.logo-ctn{
	position : relative;
	display : flex;
	flex-direction : column;
	align-items :center;
	padding-bottom : 10px;
}

.main-header .h1{
	text-align : center;
	text-transform : uppercase;
	font-family: 'OddPress',Impact, Charcoal, sans-serif;
	font-size : 3rem;
}

.sub-title{
	position : relative;
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
}

.revolution{
	position : relative;
	top : -60px;
	height : 100px;
	width : auto;
	transform : rotate(-45deg);
}

.sub-title .h1{
	font-family: 'OddPress',Impact, Charcoal, sans-serif;
	font-size : 3.5rem;
	font-weight : normal;
	color : black;
}

.sub-title .h3{
	font-family: 'Neuropol';
	align-self : flex-end;
	text-align : right;
}

.logo{
	position : relative;
	max-width : 250px;
}

.point{
	position : absolute;
	top : 35%;
	display : flex;
	justify-content : center;
	width : 100%;
	height : 20%;
}

.point img{
	height : 100%;
	width : auto;
}

/*
*	Navigation
*/


.top-bar{
	position:relative;
	z-index : 3000;
}




/*
* Titles
*/

.page-title{
	text-align : center;
	overflow : hidden;
}

.page-title .h1{
	position : relative;
	font-family: 'OddPress',Impact, Charcoal, sans-serif;
	font-size : 3.5rem;
	font-weight : normal;
	display : inline-block;
	padding : 15px;
}

.page-title .h1:before{
	content:"";
	position : absolute;
	top : 50%;
	right : 100%;
	width : 50vw;
	border-bottom : 1px solid white;
}

.page-title .h1:after{
	content:"";
	position : absolute;
	top : 50%;
	left : 100%;
	width : 50vw;
	border-bottom : 1px solid white;
	
}


/*
*	Blog
*/
.blog-post{
	display : block;
	overflow : hidden;
	border-radius : 10px;
	background-color : rgba(0,0,0,.5);
}

.blog-post-thumbnail{
	height : 200px;
	width : 100%;
}

.blog-post-content{
	
}

.blog-post-p{
	color  : white;
}



/*
*	Footer
*/


.footer{
	font-family : "Roboto", sans-serif;
	color : rgba(255,255,255,.8);
	background-color : rgba(0,0,0,.7);
	font-size : .9rem;
	font-weight : 300;
	padding-top : 30px;
	margin-top : 30px;
	overflow : hidden;
}

.footer .widget{
	display: flex;
	align-items : stretch;
	padding : 0 30px; 
	margin-bottom : 10px;
}

.footer .widget>div{
	padding : 0 10px;
	text-align : center;
	border-radius : 5px 5px 0 0;
}

.footer .h4{
	position:relative;
	display: block;
	padding : 3px 3px 3px 10px;
	margin-bottom : 5px;
	color : rgba(255,255,255,.8);
}

.footer .h5{
	color : rgba(237,28,36,.7);
}

.footer a{
	color : rgba(237,28,36,1);
}

.footer a:hover{
	color : rgba(216,106,52,1);
}

/* widget lists */
.footer strong, .footer b{
	font-weight : 600;
}

.footer-content{
}

.footer-credit{
	color : rgba(237,28,36,1);
	background-color : black;
	margin-top : 30px;
}

.footer-credit .row{
	height : 40px;
}

.footer-credit .col-12{
	margin : auto;
}



@media(max-width:768px){
	.first-title .h1{
		margin-left : 70px;
	}
	
	#nav-icon{
		position : absolute;
		top : 0;
		display: inline-block;
		width: 65px;
		height: 55px;
		margin : 10px 5px;
		transform: rotate(0deg);
		transition: .5s ease-in-out;
		cursor: pointer;
		z-index : 2000;
	}
	
	#nav-icon>span{
		display: block;
		position: absolute;
		height: 5px;
		width: 45px;
		background-color: rgba(0,0,0,1); 
		border-radius: 5px;
		opacity: 1;
		left: 0;
		transform: rotate(0deg);
		transition: .25s ease-in-out;
	}

	#nav-icon>span:nth-child(1) {
		top: 10px;
		left : 10px;
		
	}

	#nav-icon>span:nth-child(2) {
		top: 24px;
		left : 10px;
		
	}

	#nav-icon>span:nth-child(3) {
		top: 38px;
		left : 10px;
		
	}

	#nav-icon.open>span{
		background-color : rgba(237,28,36,1);
	}
	
	#nav-icon.open>span:nth-child(1) {
		top: 24px;
		transform: rotate(135deg);
	}

	#nav-icon.open>span:nth-child(2) {
		opacity: 0;
		left: -60px;
	}

	#nav-icon.open>span:nth-child(3) {
		top: 24px;
		transform: rotate(-135deg);
	}	
		
	.top-bar{
		position : absolute;
		top : 0;
		left : 0;
		width : 0;
		height : 100%;
		padding : 0;
		background : rgba(0,0,0,.3);
		z-index : 1080;
		transition : width .2s;
	}
	
	.nav-bar{
		position : absolute;
		top : 0;
		left : 0;
		width : 300px;
		height : 100%;
		padding-top : 75px;
		transform: rotateY(90deg);
		transform-origin : left top;
		background : black;
		transition : all .5s;
	}
	
	.nav-bar>div{
		padding : 0;
	}
	
	
	.top-bar.open{
		position : absolute;
		width : 110%;
		padding : 0 15px;
	}
	
	.top-bar.open .nav-bar{
		transform: rotateY(0deg);
	}
	
	.top-menu{
		position : relative;
		padding : 0;
		overflow : hidden;
		z-index : 10;
	}
	
	.top-menu ul{
		display : block;
		width : 100%;
		height : 100%;
		padding : 0;
		margin : 0;
	}
	
	.top-menu li {
		position : relative;
		display : block;
		width : 100%;
		border-top : 1px solid rgba(237,28,36,.25);
	}
	
	.top-menu li li{
		margin-bottom:-1px;
	}
	
	.top-menu a{
		position : relative;
		display : block;
		padding : 15px;
		color : rgba(237,28,36,1);
		font-weight : 700;
		text-align : right;
		text-transform: uppercase;
		transition : all .3s linear;
		z-index:2
		
	}

	.top-menu a:hover,
	.top-menu a:focus{
		color : white;
	}
	
	.top-menu a:before {
		position : absolute;
		content : "";
		display : block;
		top : 0;
		left : 0%;
		right : 100%;
		bottom :0 ;
		background : rgba(237,28,36,1); 
		transition : all .3s linear;
		z-index : -1
	}

	.top-menu a:hover:before{
		right : 0;
	}

	.page-title { 
		margin-bottom : 15px; 
	}
	
	.page-title .h1{ 
		padding-bottom : 0; 
	}
	
	/*
	 *	Bouton scroll-up
	*/
	#scroll-up{
		display : flex;
		visibility : hidden;
		position : fixed;
		bottom : 0px;
		right : 0px;
		height : 0px;
		width : 0px;
		overflow : hidden;
		font-size : 0rem;
		color : rgba(237,28,36,1);
		background-color : rgba(237,28,36,.25);
		border : 3px solid;
		border-radius : 50%;
		box-shadow : 2px 2px 5px rgba(0,0,0,.5);
		z-index:9999;
		transition : all .5s linear;
	}
	
	#scroll-up i{
		display : block;
		margin: auto;
	}
	
	#scroll-up.show{
		visibility : visible;
		font-size : 2rem;
		bottom : 5px;
		right : 5px;
		height : 50px;
		width : 50px;
	}
	
}



@media (min-width:769px){
	.top-bar{
		position: sticky;
		top : 0;
	}

	.nav-bar{
		position:relative;
		padding : 0  10px;
		background-color : black;
	}

	#nav-icon{
		display : none;	
		padding:0;
	}
	
	.top-menu{
		display : flex;
		width : 100%;
		justify-content : center;
	}

	.top-menu ul{
		display : flex; 
		justify-content : center;
		list-style-type : none;
		padding:0;
		margin-bottom: 0;
		z-index : 1090;
	}

	.top-menu>ul>li{
		position : relative;
		display : inline-block; 
		margin : 0;
		padding : 0;
	}

	.top-menu>ul>li>a {
		position : relative;
		display : block;
		font-size : 1.1rem;
		font-weight : 600;
		padding : 20px;
		color : rgba(237,28,36,1);
		text-transform: uppercase;
		transition : all .3s linear;
		z-index : 2;
	}

	.top-menu>ul>li>a:hover,
	.top-menu a:focus	{
		color : rgba(255,255,255,1);
	}

	.top-menu>ul>li>a:before {
		position : absolute;
		content : "";
		display : block;
		top : 0;
		left : 50%;
		right : 50%;
		color : transparent;
		bottom :0 ;
		transition : left .3s linear, right .3s linear;
		z-index : -1;
	}

	.top-menu>ul>li>a:hover:before,
	.top-menu>ul>li>a:focus:before{
		left : 0;
		right : 0;
		background : rgba(237,28,36,1);
	}
	
	.top-menu .menu-item-has-children{
		position : relative;
	}
	
	.sub-menu{
		display : flex;
		flex-direction : column;
		position : absolute;
		top : 100%;
		width : 200px;	
		min-width : 100%;
		background-color : black;
		transform : rotateX(90deg);
		transform-origin : top center;
		transition : .3s;
	}
	
	.sub-menu li{
		display : block;
		
	}
	
	.sub-menu a{
		display : block;
		padding : .5rem 1rem;
		text-align : right;
	}
	
	.menu-item-has-children:hover>.sub-menu{
		transform : rotateX(0deg);	
	}
	
	.top-menu>ul>li.current-menu-item{
		background-color : rgba(237,28,36,1)!important;
	}

	.top-menu>ul>li.current-menu-item>a{
		color : white!important;
	}

	.footer-content{
		max-width : 2000px;
		margin : 0 auto;
	}
	
	/*
	 *	Bouton scroll-up
	*/
	#scroll-up{
		display: none;
	}
}

/*
*	No-js
*/
@media(max-width:768px){
	.no-js #nav-icon:hover~.top-menu{
		transform : translateX(15px);
	}
}

/*
*	Wordpress Default
*/
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone,
.aligncenter,
.alignright,
.alignleft
{
	max-width : 100%;
}

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter{
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}





/*
*	Zoom
*/
.compteur{
	margin-top : 25px;
	padding : 0;
	position : relative;
	background-color : rgba(0,0,0,.7);
	
}

.book{
	display : flex;
	justify-content : center;
	align-items : center;
}

.book img{
	margin : 25px;
	height : 250px;
	width  : auto;
}

#zoom {
	display : flex; 
	background-color : rgba(0,0,0,1);
	background-image: url(https://superforce.fr/wp-content/uploads/2018/10/fond.jpg);
	position : absolute;
	left : 0;
	top : 0;
	height : 300px;
	width : 100%;
	/*right : 0;
	bottom : 0;*/
	z-index: 2000;
	justify-content:center;
	align-items: center;
}

#countdown{
	font-size : 2rem;
	font-family: Impact, Charcoal, sans-serif;
}

.annonce {
    text-align: center;
    text-transform: uppercase;
    font-family: 'OddPress',Impact, Charcoal, sans-serif;
    font-size: 4rem;
	color:rgba(255,242,0,1);
	margin-top:30px;
}