/*
Theme Name: Atelier Soriso
Author: Romain Jimenez
Author URI: https://romainjimenez.com
Description: Roms est un thème développé dans le but d'utiliser le moins de plugins possible.
Version: 1.1
Text Domain: Atelier Soriso
Tags: portfolio
*/

/* font */
body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	color: #333; /** Gris foncé **/
}

body h1, h2, h3, h4, h5, h6{
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: #333; /** Gris foncé **/
}

/* .material-icons-outlined.md-dark.md-18 { font-size: 18px; vertical-align: -2px;} */
.material-icons-outlined.md-dark.md-24 { font-size: 24px; vertical-align: -2px;}
.material-icons-outlined.md-dark.md-36 { font-size: 36px; vertical-align: -2px;}
.material-icons-outlined.md-dark.md-48 { font-size: 48px; vertical-align: -2px;}

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }

strong{
	font-family: 'Roboto', sans-serif;
}

em{
	font-family: 'Roboto', sans-serif;
}

hr {
	margin-top: 10px;
	margin-bottom: 10px;
	border: 0;
	border-top: 1px solid #333;
}

img{
	border:0;
	width:100%;
	height: auto;
}

/** Carrousel slider Article **/
html button.slick-next.slick-arrow, html button.slick-prev.slick-arrow {
  font-size: 0px;
  line-height: 0;
  top: 50% !important;
  width: 10% !important;
  height: 100px !important;
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  transform: translate(0,-50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: 0;
  background: 0 0;
  z-index: 9999;

/** apparition des images vers le haut images **/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lien-articles{
	color: #333;
}

div.tagcloud{
	font-size: 12pt;
}


/*.wp-block-image {
	margin-bottom: 0em !important;
}*/

@media (min-width: 1200px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 750px;
}
}	
.container-large {
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
}
@media (min-width: 1200px) {
.container-large {
width: 1170px;
}
}
@media (min-width: 992px) {
.container-large {
width: 1170px;
}
}



/* img responsive article */
article p img {
	width: 100%;
}

section div img{
	width: 100%;
}

/** Navigation **/
.navbar-collapse {
	padding-right: 0px;
	padding-left: 0px;
}

.navbar {
	border-radius: 0px;
	margin-bottom: 0px;
	padding-top: 20px;
}

#navbar{
	padding-right: 0px;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #333;
}

.navbar-nav {
	float: right;
	margin: 0;
}

@media (max-width: 767px) {
	.navbar-nav {
		float: none;
		text-align: center;
		margin: 0;
	}
}

.navbar-default {
	background-color: transparent;
	border-color: transparent;
}

.navbar-default .navbar-nav > li > a {
	color: #333;
}

.navbar-default .navbar-nav > .active > a {
	background-color: transparent;
	color: #333; /** Gris foncé **/
}
.navbar-default .navbar-nav > .active > a:hover{
	background-color: transparent;
	color: #333; /** Gris foncé **/
}

.navbar-nav > li > .dropdown-menu {
	margin-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	z-index: 9999;
}

.nav > li > a {
	padding: 10px 5px;
	text-align: left;
}

.nav > li > a:focus, .nav > li > a:hover {
	text-decoration: none;
	background-color: transparent;
}

.navbar-right a{
	float: right !important;
	margin-left: 15px;
	padding: 24px;
}


/* Navigation secondaire (footer) */
footer .navbar-nav {
	float: none;
	text-align: left;
	padding:15px;
	margin: 0;
}
footer ul li{
	display: inline;
}

/* Liens du site global */
a {
	list-style-type: none;
	text-decoration: none;
	color: #333; /** Gris foncé **/
}

a:hover {
	list-style-type: none;
	text-decoration: none;
	color: #333; /** Gris foncé **/
}

ul {
	list-style-type: none;
}

li{
	list-style-type: none;
}

/* Toggle menu */
.container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
	margin-right: -15px;
	margin-left: -15px;
	text-align: center;
}

.navbar-collapse {
	padding-right: 15px;
	padding-left: 15px;
}

.navbar-toggle {
	position: relative;
	float: left;
	padding: 11px 8px;
	margin: 0px;
	margin-bottom: 8px;
	background-color: #333;
	background-image: none;
	border: 1px solid #333;
	border-radius: 0px;
}

.dropdown-menu {
	font-size: 14px;
	text-align: center;
	list-style: none;
	list-style-type: none;
	border-radius:0px;
	border-top: 1px solid rgba(51,51,51,1);
	background-color: rgba(255, 255, 255, 0.8);
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
	color: white;
	background-color: #333;
}

.navbar-default .navbar-toggle {
	border-color: transparent;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
	background-color: #333;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #FFF;
}

/** Logo lien clickable **/
html body div header a, html body div header a h2{
	display:inline-block;
}

/** Couleur des réseaux sociaux **/
.nav navbar-nav navbar-right li{
	padding-right: 15px;
	padding-left: 15px;
}

nav navbar-nav navbar-right a:hover{
	color: #333;
}


/*Aside*/
aside h4.widgettitle{
	font-size: 40px;
	color: #333;
}

/*Articles récents single.php*/
.recent-post{
	padding-top: 20px;
}
html body aside ul{
	padding-left: 0px;
	padding-right: 0px;
}

/*Footer*/
footer{
	padding-top: 20px;
}

/*Contact Formulaire*/
#contactForm{
	padding-top: 20px;
}

.col-sm-12 form-group hide{
	display: none !important;
}

/*Commentaires*/
.comment-author img{
	width: 32px;
}

#respond { } 
#reply-title { } 
#cancel-comment-reply-link { }
#commentform { } 
#author { } 
#email { } 
#url { } 
#comment 
#submit
.comment-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment label{
	vertical-align: top;
} 
#respond{
	color: #333; /** Gris foncé **/
}
#reply-title{
	padding-top: 20px;
	padding-left: 20px;
}
#submit{
	margin-bottom: 20px;
}

#commentform{
	padding-left:  20px;
}

.comment-form-comment > label{
	display: block;
}

.form-allowed-tags { } 

.form-submit .submit{
	color: #ffffff;
	background-color: #333;
	border-color: #333;
	display: inline-block;
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-moz-user-select: none;
	border: 1px solid transparent;
	padding: .5rem 1rem;
	font-size: 1.2rem;
	border-radius: 0rem;
	transition: all .2s ease-in-out;
	text-transform: none;
}

/*Div Overlay*/
#box{
	position:relative;
	width:100%;
	height:auto;
	background-size:cover;
	overflow:hidden;
}
#overlay{
	background:rgba(0,0,0,.75);
	text-align:center;
	padding:0px 0 0px 0;
	opacity:0;
	-webkit-transition: opacity .25s ease;
	z-index: 1000;
	position: relative;
}
#box:hover #overlay {
	opacity:1;
	color:#333;
}

/*Style 1*/
#plus {
	position: absolute;
	padding: 15px 15px;
	font-family: 'Lato', sans-serif; font-weight: 700 !important;
	color:rgba(255,255,255,1);
	font-size: 25px;
	z-index: 1000;
}

/*Style 2*/
#plus {
	position: absolute;
	padding:15px;
	font-family: 'Lato', sans-serif;
	font-weight: 700 !important;
	color: rgba(255,255,255,1);
	z-index: 1000;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	text-align: left;
}



/* Images thumbnail */
.thumb-home{
	padding-bottom:15px;
	padding-top: 15px;
}

@media (max-width: 767px) {
	.thumb-home{
		padding: 0px 0 15px 0;
	}
}



/*Progress Bar*/
*, *::after, *::before {
	box-sizing: border-box;
}

progress {
	/* Positioning */
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;

	/* Dimensions */
	width: 100%;
	height: .25em;

	/* Reset the apperance */  
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	/* Get rid of the default border in Firefox/Opera. */
	border: none;

	/* For Firefox/IE10+ */
	background-color: transparent;

	/* For IE10+, color of the progress bar */
	color: red;
}

progress::-webkit-progress-bar {
	background-color: transparent;
}

.flat::-webkit-progress-value {
	background-color: red;
}

.flat::-moz-progress-bar {
	background-color: red;
}

.single::-webkit-progress-value {
	background-color: transparent;
	background-image: -webkit-linear-gradient(left, transparent, red);
}

.single::-moz-progress-bar {
	background-color: transparent;
	background-image: -moz-linear-gradient(left, transparent, red);
}

.multiple::-webkit-progress-value {
	background-image: -webkit-linear-gradient(-45deg, 
		transparent 33%, rgba(0, 0, 0, .1) 33%, 
		rgba(0,0, 0, .1) 66%, transparent 66%),
	-webkit-linear-gradient(left, green, red);
}

.multiple::-moz-progress-bar {
	background-image: -moz-linear-gradient(-45deg, 
		transparent 33%, rgba(0, 0, 0, .1) 33%, 
		rgba(0,0, 0, .1) 66%, transparent 66%),
	-moz-linear-gradient(left, green, red);
}

.progress-container {
	width: 100%;
	background-color: transparent;
	position: fixed;
	top: 0;
	left: 0;
	height: .25em;
	display: block;
}

.progress-bar {
	background-color:red;
	width: 50%;
	display: block;
	height: inherit;
}


/*Chevron du panel*/
.accordion-toggle:after {
	/* symbol for "opening" panels */
	font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
	content: "\e114";    /* adjust as needed, taken from bootstrap.css */
	float: right;        /* adjust as needed */
	color: #333;         /* adjust as needed */
	padding-left: 10px;
}
.accordion-toggle.collapsed:after {
	/* symbol for "collapsed" panels */
	content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}


/* Page 404  */
* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

canvas {
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
	/*width: 100%;
	height: 100%;*/
}

.caps {
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: as 8s linear infinite;
}

.caps img {
	display: block;
	width: 100%;
	height: 100%;
}

@keyframes as {
	0% {
		opacity: 0;
	}
	10% {
		opacity: .3;
	}
	20% {
		opacity: .1;
	}
	30% {
		opacity: .5;
	}
	40% {
		opacity: 0;
	}
	50% {
		opacity: .8;
	}
	55% {
		opacity: 0;
	}
	55% {
		opacity: 0;
	}
}

.frame {
	z-index: 3;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(19%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00000000', endColorstr = '#e6000000', GradientType = 1); /* IE6-9 fallback on horizontal gradient */

}

.frame div {
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -20%;
	width: 100%;
	height: 20%;
	background-color: rgba(0, 0, 0, .12);
	box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	animation: asd 12s linear infinite;
}

.frame div:nth-child(1) {
	animation-delay: 0;
}

.frame div:nth-child(2) {
	animation-delay: 4s;
}

.frame div:nth-child(3) {
	animation-delay: 8s;
}

@keyframes asd {
	0% {
		top: -20%;
	}
	100% {
		top: 100%;
	}
}

.catecentcat {
	z-index: 3;
	position: absolute;
	font: bold 200px/200px Arial, sans-serif;
	left: 50%;
	top: 35%;
	margin-top: -100px;
	width: 100%;
	margin-left: -50%;
	height: 200px;
	text-align: center;
	color: transparent;
	text-shadow: 0 0 30px rgba(0, 0, 0, .5);
	animation: asdd 2s linear infinite;
}

@keyframes asdd {
	0% {
		text-shadow: 0 0 30px rgba(0, 0, 0, .5);
	}
	33% {
		text-shadow: 0 0 10px rgba(0, 0, 0, .4);
	}
	66% {
		text-shadow: 0 0 20px rgba(0, 0, 0, .2);
	}
	100% {
		text-shadow: 0 0 40px rgba(0, 0, 0, .8);
	}
}

/******************
 *** Call to action
*******************/
.btn-outline {
  color: #0838FF ;
  border-color: #0838FF;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.btn-outline {
  color: #0838FF ;
  border-color: #0838FF ;
  font-weight: bold;
  border-radius: 0;
}

.btn-outline:hover,
.btn-outline:active,
.btn-outline:focus,
.btn-outline.active {
  background: #0838FF;
  color: #ffffff;
  border-color: #0838FF;
  
}

/*CSS archive-elearning */
		.vcenter {
			display: inline-block;
			vertical-align: middle;
			float: none;
		}
		.patern-lines {
			background-image: url("http://www.romainjimenez.com/wp-content/uploads/2019/12/Line_20_10pp.png");
			background-color:#fff;
			left: 0px;
			bottom: -15px;
			width: calc(100% - 50px);
			height: 170px;
			background-position: center;
			background-repeat: repeat;
			position: absolute;
			z-index: -100;
			display: inline-block;
		}
		.addMarginBottom{
			margin-bottom: 30px;
		}
		.darkline{
			background-color: #333;
			vertical-align: 90%;
			width:1px;
			height:100px;
			margin: 0 auto;
			margin-bottom: 20px;
		}
		.big-h2-title{
			font-size: 50px;
		}
		.hero-image {
			background-image: url("http://www.romainjimenez.com/wp-content/uploads/2019/12/mesh_banner_03.png");
			background-color: #f2f2f2;
			height: 500px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
		}
		.hero-text {
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.ldBar.label-center > .ldBar-label {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			text-shadow: 0 0 3px 
			#fff;
			font-size:50px;
		}
		.ldBar-label:after {
			content: "%";
			color: #333;
			margin-left: 5px;
			font-family: courier new;
			font-size: 0.7em;
			font-weight: 200;
		}

		/*CSS ProgressBar circle */
		.progressbar {
			display: inline-block;
			width: 125px;
			margin-bottom: 15px;
		}
		.circle {
			width: 100%;
			margin: 0 auto;
			margin-top: 10px;
			display: inline-block;
			position: relative;
			text-align: center;
		}
		.circle div {
			position:absolute;
			top: 45px;
			left: 0;
			width: 100%;
			text-align: center;
			line-height: 40px;
			font-size: 45px;
		}
		.circle p {
			position: relative;
			top: 135px;
			width: 100%;
			text-align: center;
			margin-bottom: 100px;
		}
		.img-fluid{
			width:75%;
		}
.object-bounce {
  animation: MoveUpDown 3s linear infinite;
  position: relative;
  text-align:center;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 25px;
  }
}

/* CV */
		p .cv{
			font-family: Roboto;
			font-style: normal;
			font-weight: normal;
			font-size: 14px;
			line-height: 18px;
		}

		h1 span{
			font-weight: 600;
			font-size: 60px;
			line-height: 56px;
		}
		h2 span{
			font-weight: 600;
			font-size: 48px;
			line-height: 56px;
		}

		.skills{
			background-color: #F7F8F9;
		}
		.skills-block{
			background-color: #FFF;
			padding-left:3px;
			border-bottom: solid;
			border-left: solid;
			border-color: #333;
		}
		.skills-stats-1, .skills-stats-2, .skills-stats-3, .skills-stats-4 .skills-stats-5, .skills-stats-6, .skills-stats-7, .skills-stats-8, .skills-stats-9, .skills-stats-10{
			background-color: #263682;
			color:#fff;
			display: block;
			padding: 5px 10px 5px 10px;
			font-style: normal;
			font-weight: normal;
			font-size: 14px;
			line-height: 18px;
			border-bottom: solid;
			border-color: #F7F8F9;
		}
		.skills-stats-1{width:10%;}
		.skills-stats-2{width:20%;}
		.skills-stats-3{width:30%;}
		.skills-stats-4{width:40%;}
		.skills-stats-5{width:50%;}
		.skills-stats-6{width:60%;}
		.skills-stats-7{width:70%;}
		.skills-stats-8{width:80%;}
		.skills-stats-9{width:90%;}
		.skills-stats-10{width:100%;}

		.skills-stats span{
			color:#263682;
		}
		.skills-unite{
			border-left: solid;
			border-color: #333;
			margin-left: 0px;
			padding-left: 15px;
			height:5px;
		}

		/*--------------------------------------------------------------
			START New Style
		-------------------------------------------------------------- */

		/* New Style */
		


.no-padding {
	padding:0 !important;
	margin:0 !important;
}
#my_menu_id a {
  position: relative;
  display: inline !important;
  text-align: left;
}


		/*--------------------------------------------------------------
			END New Style
		-------------------------------------------------------------- */