/* =============================================================================================== */
/* GRID ========================================================================================== */
/* =============================================================================================== */

section.grid {
	float: left;
	width: calc(100% + 10px);
	margin: 0 -5px; }
	section.grid .grid-title { 
		float: left;
		width: 100%;
		color: var(--frame-main);
		font-family: "Proxima Nova"; 
   		font-size: 18px;
		font-weight: bold;
		text-transform: uppercase;
		line-height: 1;
		margin: 25px 5px 15px; }

	section.grid .grid-box {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 10px;
		width: 100%;
		margin: 0 0 30px; }
		section.grid .grid-box.by-twos { grid-template-columns: repeat(2, 1fr); }
			@media (max-width: 425px) { section.grid .grid-box.by-twos { grid-template-columns: repeat(1, 1fr); } }
		section.grid .grid-box.by-threes { grid-template-columns: repeat(3, 1fr); }
			@media (max-width: 768px) { section.grid .grid-box.by-threes { grid-template-columns: repeat(2, 1fr); } }
			@media (max-width: 425px) { section.grid .grid-box.by-threes { grid-template-columns: repeat(1, 1fr); } }
		section.grid .grid-box.by-fours { grid-template-columns: repeat(4, 1fr); }
			@media (max-width: 1024px) { section.grid .grid-box.by-fours { grid-template-columns: repeat(3, 1fr); } }
			@media (max-width: 768px) { section.grid .grid-box.by-fours { grid-template-columns: repeat(2, 1fr); } }
			@media (max-width: 425px) { section.grid .grid-box.by-fours { grid-template-columns: repeat(1, 1fr); } }
		section.grid .grid-box.by-fives { grid-template-columns: repeat(5, 1fr); }
			@media (max-width: 1024px) { section.grid .grid-box.by-fives { grid-template-columns: repeat(3, 1fr); } }
			@media (max-width: 768px) { section.grid .grid-box.by-fives { grid-template-columns: repeat(2, 1fr); } }
			@media (max-width: 425px) { section.grid .grid-box.by-fives { grid-template-columns: repeat(2, 1fr); } }

	section.grid .box {
		display: none;
		width: 100%;
		height: 100%; }
		/*section.grid .box.by-ones { width: calc(100% / 1); }
		section.grid .box.by-twos { width: calc(100% / 2); }
			@media (max-width: 425px) { section.grid .box.by-twos { width: calc(100% / 1); } }
		section.grid .box.by-threes { width: calc(100% / 3); }
			@media (max-width: 768px) { section.grid .box.by-threes { width: calc(100% / 2); } }
			@media (max-width: 425px) { section.grid .box.by-threes { width: calc(100% / 1); } }
		section.grid .box.by-fours { width: calc(100% / 4); }
			@media (max-width: 1024px) { section.grid .box.by-fours { width: calc(100% / 3); } }
			@media (max-width: 768px) { section.grid .box.by-fours { width: calc(100% / 2); } }
			@media (max-width: 425px) { section.grid .box.by-fours { width: calc(100% / 1); } }
		section.grid .box.by-fives { width: calc(100% / 5); }
			@media (max-width: 1024px) { section.grid .box.by-fives { width: calc(100% / 3); } }
			@media (max-width: 768px) { section.grid .box.by-fives { width: calc(100% / 2); } }
			@media (max-width: 425px) { section.grid .box.by-fives { width: calc(100% / 1); } }*/

	section.grid .box.list {
		    display: grid !important;
		    grid-template-columns: 1fr 1fr; }


	section.grid .box .image {
		position: relative;
		float: left;
	    background-color: var(--frame-lght-grey);
	    background-position: center;
	    background-size: cover;
		background-blend-mode: multiply;
	    width: 100%;
	    height: 250px;
	    transition: 0.5s; }
	    section.grid .box:hover .image {
			background-color: transparent; 
			transition: 0.3s; }
		section.grid .box .image svg,
		section.grid .box .image i { 
		    position: absolute; top: calc(50% - 60px); left: calc(50% - 20px);
		    width: 40px;
			height: 40px;
		    color: white;
		    background-color: rgba(0,0,0,0.3);
		    font-size: 20px;
		    border-radius: 100%;  
		    padding: 10px 12px;
		    opacity: 0;
			transform: scale(1) rotate(45deg);
			transition: 0.5s; }
			section.grid .box:hover .image svg,
			section.grid .box:hover .image i {  
				top: calc(50% - 20px);  
				opacity: 1;
				transform: scale(1) rotate(0deg);
				transition: 0.3s; }

    section.grid .box .inner {
    	float: left;
    	width: 100%; } 
	section.grid .box .category {
		color: grey;
		font-size: 12px;
		text-transform: uppercase;
    	padding: 5px 10px 0; }

    section.grid .box .title { 
    	display: flex;
		float: left;
		width: 100%;
		color: #333;
		font-size: 14px;
		font-weight: bold;
		text-transform: uppercase;
		line-height: 1;
		padding: 5px 10px;
		margin: 0 0 5px;
		overflow: hidden;
		transition: 0.5s; }
		@media (max-width: 425px) { section.grid .box .title { height: auto; } }
		section.grid .box:hover .title {
			color: var(--frame-main);
			transition: 0.3s; } 
    section.grid#grid-latest .box .title,
	section.grid#grid-video-link .box .title { 
	 	height: auto;
	 	padding: 10px 10px 5px; }

	section.grid .box .desc { 
		float: left;
		height: 34px;
		color: grey;
		line-height: 1.2;
		overflow: hidden;
		padding: 0px 10px 5px; }

	section.grid .box.swiper-like {
		position: relative; }
		section.grid .box.swiper-like .image {
			height: 400px;
			background-color: transparent; }
		section.grid .box.swiper-like .inner {
		    position: absolute; bottom: 0; left: 0;
		    width: 100%; 
		    background-color: rgba(0,0,0,0.5);
		    padding: 5px 15px; }
			section.grid .box.swiper-like .inner .title {
				align-items: baseline;
				color: white;
				font-size: 12px;
				font-weight: bold;
				text-transform: uppercase;
				line-height: 1.3;
				padding: 0;
    			margin-top: 3px; }
			section.grid .box.swiper-like .inner .desc {
				display: none; }