section.sea-grid {
    position: relative;
    float: left;
    width: 100%;
    padding: 0; }

    section.sea-grid .head {
	    color: var(--frame-main);
	    font-size: 18px;
	    font-family: "Proxima Nova";
	    font-weight: bold;
	    text-transform: uppercase; }

    section.sea-grid .grid {
    	position: relative;
    	float: left;
    	width: 100%; }

		section.sea-grid .grid .group {
			position: relative; 
			float: left;
			width: 100%;
			background-color: #eee; }
			section.sea-grid .grid .group#no-group { padding-top: 10px }

			section.sea-grid .grid .group .head {
			    position: relative;
				float: left;
			    width: 100%;}
				section.sea-grid .grid .group .head span {
			    	height: 30px;
				    color: white;
				    background-color: red; background-color: var(--frame-main);
				    font-weight: bold;
				    text-transform: uppercase;
				    padding: 5px 30px; }
	    	section.sea-grid .grid .group .box {
	    		position: relative;
	    		float: left;
	    		width: 100%;
	    		background-position: center;
	    		background-size: cover;
	    		cursor: pointer; }

	    	section.sea-grid .grid .box .cont {
			    position: absolute; left: 0; bottom: 0;
			    width: 100%;
			    background-color: rgba(0,0,0,0.7);
			    color: white;
			    font-weight: bold;
			    line-height: 1;
			    padding: 10px 20px;
				transition: 0.3s; }
	    		section.sea-grid .grid .box:hover .cont {
	    			background-color: red; background-color: var(--frame-main);
	    			transition: 0.3s; }

section.sea-grid .light-box {
    position: fixed; top: 0; left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.9);
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s; }
	section.sea-grid .light-box.open {
	    visibility: visible;
	    opacity: 1;
	    transition: 0.3s; }

	section.sea-grid .light-box .flex { display: flex; align-items: center; height: 100%; }
	section.sea-grid .light-box .row { display: block; width: 100%; text-align: center; margin: 0; }

	section.sea-grid .light-box .box {
		position: relative;
		display: inline-block; 
		width: 100%; max-width: 900px;
		background-color: rgba(0,0,0,0.7);
		transform: scale(0.6);
		opacity: 0;
		transition: 0.5s;  }
		section.sea-grid .light-box.open .box {
			transform: scale(1);
			opacity: 1;
			transition: 0.5s; }

		section.sea-grid .light-box .box .close { 
			position: absolute; right: 0; top: -45px;
			width: 35px; height: 35px;
			background-color: rgba(255,255,255,0.5);
			color: white;
			font-size: 16px;
			text-align: center;
			border-radius: 100%;
			padding: 10px 0; }
			@media (max-width: 425px) {
				section.sea-grid .light-box .box .close { top: -100px; right: 5px; }
			}

		section.sea-grid .light-box .box .nav { 
		    display: block;
			position: absolute; top: calc(50% - 15px);
			width: 35px; height: 35px;
			background-color: rgba(255,255,255,0.5);
			color: white;
			font-size: 22px;
			text-align: center;
			border-radius: 100%;
			padding: 2px 0;
			cursor: pointer;
			opacity: 0.8; }
			section.sea-grid .light-box .box .nav.prev { left: -45px; padding-right: 3px; } 
			section.sea-grid .light-box .box .nav.next { right: -45px; padding-left: 3px; }
			section.sea-grid .light-box .box .nav:hover { opacity: 1; } 
			@media (max-width: 425px) {
				section.sea-grid .light-box .box .nav { top: calc(100% + 5px); }
					section.sea-grid .light-box .box .nav.prev { left: 5px } 
					section.sea-grid .light-box .box .nav.next { right: 5px }
			}

		section.sea-grid .light-box .box .title {
			position: absolute; left: 0; top: -45px;
			background-color: rgba(0,0,0,0.7);
			color: white;
			font-weight: bold;
			padding: 10px 30px; } 
			@media (max-width: 425px) {
				section.sea-grid .light-box .box .title { top: -62px; }
			}

		section.sea-grid .light-box .box iframe,
		section.sea-grid .light-box .box #iframe { 
			width: 100%;
			line-height: 0;
			overflow: hidden; }

section.sea-grid .load-more {
	position: relative; top: -20px;
	float: right;
	background-color: red; background-color: var(--frame-main);
	color: white;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 15px;
    cursor: pointer; }
	section.sea-grid .load-more.load {
		opacity: 0.3;
		filter: grayscale(1);
		cursor: unset; }