/* 
Theme Name:		 Rheno
Theme URI:		 rheno.fr
Description:	 Thème personnalisé pour Rheno Plastiques
Author:			 NetPilote
Author URI:		 https://agenceweb.netpilote.com
Template:		 twentyseventeen
Version:		 1.0.0
License:      	 GNU General Public License v2 or later
License URI: 	 http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:	 Rheno
-------------------------------------------------------------- */ 

/* Circles on homepage */
.main-cat {
	margin-bottom: 50px;
}

.blue {
	background-image: linear-gradient(-5deg, #001061 0%, #3571f4 60%);
}
.red {
	background-image: linear-gradient(-0deg, #70000d 36%, #f0001d 100%);
}
.gold {
	background-image: linear-gradient(0deg, #ff9420 42%, #ffcc08 100%);
}
.circle {
	border-radius: 50%;
	border-style: solid;
	border-color: white;
	margin-left: auto;
	margin-right: auto;
}
.circle-hover {
	position: relative;
	height: 220px;
	width: 220px;
	margin: 0 auto;
	transform-style: preserve-3d;
	z-index: 3;
}
.circle-hover .front, .circle-hover .back {
	position: absolute;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	transform-origin: center center;
	overflow: hidden;
}
.main-cat a,
.main-cat a:hover {
	box-shadow: none;
}
.circle-hover .circle img {
	box-shadow: none;
	max-width: none;
	vertical-align: middle;
}
.title-circle {
	text-align: center;
	font-size: 1.0rem;
	font-weight: 600;
	color: #222;
	letter-spacing: 1.5px;
	padding: 0 15px;
	margin-top: 10px;
	text-transform: uppercase;
	height: 50px;
}
.rectangle{
	background: white;
    box-shadow: 0 2px 8px 0 rgba(42, 42, 42, 0.50);
    height: 7px;
    border-color: #979797;
    margin-top: 20px;
	margin-left : 40px;
	margin-right : 40px;
	bottom : 0;
	position : relative;
}

@media (max-width: 767px) {
	.circle {
		border-width: 7px;
		height: 172px;
		width: 172px;
	}
	.atiquette {
		height: 120px;
		position: relative;
		top: 20px;
		left: 35px;
	}
	.affiche {
		height: 95px;
		position: relative;
		top: 3px;
		left: 30px;
	}
	.pub {
		height: 80px;
		position: relative;
		top: 40px;
		left: 35px;
	}
	.rouleau {
		height: 43px;
		position: relative;
		top: 10px;
		left: 25px;
	}
	.postit {
		height: 40px;
		position: relative;
		top: 25px;
		left: 35px;
	}
	.intercalaire {
		height: 70px;
		position: relative;
		top: 30px;
		left: 30px;
	}
	.bloc {
		height: 52px;
		position: relative;
		top: 15px;
		left: 35px;
	}
}

@media only screen and (max-width: 1199px) and (min-width: 768px) {
	.circle {
		border-width: 10px;
		height: 190px;
		width: 190px;
	}
	.atiquette {
		height: 140px;
		position: relative;
		top: 19px;
		left: 34px;
	}
	.affiche {
		height: 105px;
		position: relative;
		top: 3px;
		left: 30px;
	}
	.pub {
		height: 95px;
		position: relative;
		top: 40px;
		left: 40px;
	}
	.rouleau {
		height: 50px;
		position: relative;
		top: 10px;
		left: 30px;
	}
	.postit {
		height: 45px;
		position: relative;
		top: 20px;
		left: 20px;
	}
	.intercalaire {
		height: 95px;
		position: relative;
		top: 20px;
		left: 15px;
	}
	.bloc {
		height: 55px;
		position: relative;
		top: 0;
		left: 25px;
	}
}
@media (max-width: 1200px) {
	.main-cat {
		margin-bottom: 20px;
	}

	.circle-hover {
		width: 190px;
		height: 190px;
	}
	.circle-hover .back {
	display:none;
	}
	.rectangle {
		display: none;
	}
}
@media (min-width: 1200px) {
	.circle-hover .front {
	transition: transform 0.4s linear;
	z-index: 2;
	}
	.circle-hover .back {
		transform: rotateY(90deg);
	}
	.circle {
		border-width: 10px;
		height: 220px;
		width: 220px;
	}
	.rectangle {
		background-image: none;
	}
	.atiquette {
		height: 160px;
		position: relative;
		top: 19px;
		left: 43px;
	}
	.huile {
		position: relative;
		top: -15px;
		height: 170px;
	}
	.bitmap {
		height: 140px;
		position: relative;
		top: -110px;
		left: 30px;
	}
	.affiche {
		height: 115px;
		position: relative;
		top: 2px;
		left: 42px;
	}
	.pub {
		height: 100px;
		position: relative;
		top: 25px;
		left: 45px;
	}
	.rouleau {
		height: 60px;
		position: relative;
		top: 10px;
		left: 55px;
	}
	.chapelier {
		height: 215px;
		position: relative;
		top: -40px;
		left: 10px;
	}
	.couleur {
		height: 135px;
		position: relative;
		top: -64px;
		left: -2px;
	}
	.bitmap2 {
		height: 100px;
		position: relative;
		top: -135px;
		left: 95px;
	}
	.postit {
		height: 55px;
		position: relative;
		top: 35px;
		left: 35px;
	}
	.intercalaire {
		height: 85px;
		position: relative;
		top: 35px;
		left: 35px;
	}
	.bloc {
		height: 65px;
		position: relative;
		top: 20px;
		left: 65px;
	}
	.fourniture {
		height: 220px;
		position: relative;
		top: -32px;
		left: 0;
	}
	.main-cat:hover .front {
		transform: rotateY(90deg);
	}
	.main-cat:hover .back {
		transition: transform 0.4s linear 0.4s;
		transform: rotateY(0deg);
		overflow: visible;
	}
	.main-cat:hover .rectangle.blue {
		background-image: linear-gradient(90deg, #003bbd 12%, #3d70fd 91%);
	}
	.main-cat:hover .rectangle.red {
		background-image: linear-gradient(90deg, #70000d 18%, #f0001d 100%);
	}
	.main-cat:hover .rectangle.gold {
		background-image: linear-gradient(90deg, #f76b1c 8%, #fbda61 100%);
	}
}