/*General Styles*/

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;

}

html {
font-family: 'Nunito Sans', sans-serif;
color: #555;
}

ul,
nav {
	list-style: none;
}

a {
	text-decoration: none;
	opacity: 0.75;
	color: #fff;
}

a[href^=tel]{
	color: inherit;
	text-decoration: none;
}

a:hover {
	opacity: 1;
}

a.btn {
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	background-color: #8c9eff;
	opacity: 1;
}

section {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 100px 80px;
}

.section-list {
	list-style: disc !important;
	margin-left: 50px !important;
}

section:not(.main):nth-child(even) {
	background-color: #ffffff;
}
section:not(.main):nth-child(odd) {
	background-color: #eeeeee;
}

.grid {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

hr {
	width: 250px;
	height: 3px;
	background-color: #6b79c5;
	border: 0;
	margin-bottom: 50px;
}

section h3.title {
	text-transform: capitalize;
	font: bold 32px "Open Sans", sans-serif;
	margin-bottom: 30px;
	text-align: center;
}

section p {
	max-width: 775px;
	line-height: 2;
	padding: 0 20px;
	margin-bottom: 30px;
	text-align: center;
}


@media (max-width: 800px) {
	section {
		padding: 50px 20px;
	}
}

.list-bullets {
	list-style: disc !important;
}

.form-inputs {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

@media(max-width: 900px){
	.form-inputs {
		flex-direction: column;
	}
}

.black-text {
	color: black;
}

#background-image{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-color: #80a3db;
	z-index: -1;
}

.link-underline:hover {
	border-bottom: 2px solid black;
}

/* .border-right {
	border-right: 1px solid black;
} */

/* Image page styles */

#image-page {
	position: absolute;
	z-index: 2;
	border: 1px solid black;
	background-color: white;
	display: none;
	height: auto;
	width: auto;
	border-radius: 8px;
	padding: 20px;
}

#image-page .image-page-header{
	width: 100%;
	height: 25px;
	border-bottom: 1px solid rgb(224, 224, 224);
}

#image-page img {
	position: relative;
	margin: 20px auto 5px;
	max-width: 55vw;
	height: auto;
}



@media (max-width: 1000px) {
	#image-page img {
		max-width: 80vw;
	}
}
@media (max-width: 800px) {
	#image-page img {
		max-width: 90vw;
	}
}



/*Header Styles for home page*/

header {
	position: absolute;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding-right: 50px;
	-webkit-animation: 1s fadein 0.5s forwards;
	        animation: 1s fadein 0.5s forwards;
	opacity: 0;
	color: #fff;
	z-index: 1;
	background-color: rgba(168, 168, 168, 0.589);
}



@-webkit-keyframes fadein {
	100% {
		opacity: 1;
	}
}



@keyframes fadein {
	100% {
		opacity: 1;
	}
}

header .logo {
	position: relative;
	width: 795px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

header .logo a {
	opacity: .75;
}

header .logo a:hover{
	opacity: 1;
}

header .logo img {
	width: 192px;
	height: 180px;
	background-color: rgba(252, 252, 252, 0.5);
}

header .logo h2 {
	font-size: 2.8em;
	text-shadow: 2px 2px rgb(44, 44, 44);
}

/* header desktop nav */

header nav .desktop-nav{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-shadow: 1px 1px rgb(44, 44, 44);
}

header nav .desktop-nav li {
margin: 0;
padding: 0px;
font-size: 1.2em;
}

header nav .desktop-nav li a{
	margin: 0;
	padding: 10px;
	}

header nav .desktop-nav li:not(:first-child):before {
	content: " | ";
	color: rgb(143, 143, 143);
}

header nav .desktop-nav .services-dropdown .services-tab a {
	color: rgb(233, 233, 233);
}


header nav .desktop-nav .services-dropdown .services-tab a:hover{
	color: #fff;
}

header nav .desktop-nav .services-dropdown .services-tab {
	position: absolute;
	background-color: rgb(255, 255, 255);
	display: none;
	border-radius: 3px;
	border: 1px solid black;
	overflow: hidden;
	font-size: 14px;
	width: auto;
}

header nav .desktop-nav .services-dropdown .services-tab li{
	color: black;
	text-shadow: none;
}

header nav .desktop-nav .services-dropdown .services-tab li:hover{
	color: rgb(150, 150, 150);
}

header nav .desktop-nav .services-dropdown:hover .services-tab{
	display: block;
	-webkit-animation: .3s reveal forwards;
	        animation: .3s reveal forwards;
}

@-webkit-keyframes reveal {
	0%{
		opacity: 0;
	}
	100%{
		padding: 0px 15px 0px 10px;
		opacity: 1;
	}
}

@keyframes reveal {
	from {
		opacity: 0;
		max-height: 0px;
	}
	to {
		padding: 0px 15px 0px 10px;
		max-height: 300px;
		opacity: 1;
	}
}

/* header mobile nav */

header nav .mobile-nav {
	text-align: center;
	width: 100%;
	display: none;
	text-shadow: 1px 1px rgb(44, 44, 44);
}

header nav .mobile-nav .mobile-nav-hidden {
	position: relative;
	display: none;
	width: 100%;
	background-color: rgba(218, 218, 218, 0.637);
}

header nav .mobile-nav:hover {
	cursor: pointer;
}

header nav .mobile-nav .mobile-nav-hidden .mobile-services-dropdown .mobile-services-tab {
	display: none;
	background-color: rgba(228, 228, 228, 0.781);
}

header nav .mobile-nav .mobile-nav-hidden .mobile-services-dropdown .mobile-services-tab .divider {
	color: rgb(167, 167, 167);
}

header nav .mobile-nav .mobile-nav-hidden .mobile-services-dropdown:hover .mobile-services-tab{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	        flex-direction: column;
	        justify-content: center;
	    flex-wrap: wrap;
	        align-items: center;
	        animation: .3s reveal2 forwards;
}


header nav .mobile-nav .mobile-nav-hidden .mobile-services-dropdown .mobile-services-tab li {
	padding: 5px;
	color: black;
	text-shadow: none;
}


@keyframes reveal2 {
	0%{
		opacity: 0;
		max-height: 0px;
	}
	50% {
		max-height: 300px;
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


@media (max-width: 1320px){

	header nav li {
		font-size: 17px;
		}

	header .logo {
		width: 700px;
		height: auto;
	}
	header .logo h2 {
		font-size: 2.4em;
	}
}

@media (max-width: 1170px){

	header .logo h2 {
		font-size: 2.2em;
	}

	header .logo {
		width: 680px;
		height: auto;
	}
	header nav .desktop-nav li {
		font-size: 14px;
		}
	
}



@media (max-width: 1060px){
	header nav .desktop-nav {
		display: none;
	}


	header nav .mobile-nav {
		display: block;
	}
	header {
		padding-bottom: 20px;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	header nav {
		margin-top: 20px;
		width: 100vw;
	}
	header nav li {
		font-size: 20px;
		}
}



@media (max-width: 800px) {
header {
	padding: 0px 50px 20px 50px;
}

	header nav {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		font-size: 18px;
		margin-top: 15px;
	}

	header .logo {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		width: 100%;
	}

	header .logo h2 {
		font-size: 1.8em;
		white-space: nowrap;
	}

	header .logo img {
		width: 150px;
		height: auto;
	}

}

@media (max-width: 420px){
	header .logo h2 {
		padding-top: 10px;
		font-size: 22px;
	}
	header nav li{
		font-size: 18px;
	}

}

@media (max-width: 320px){
	header .logo h2 {
		padding-top: 18px;
	}

}



/*Main Page Styles*/

.main {
	position: relative;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	text-align: center;
	min-height: 100vh;
	color: #fff;
	
}

.background-image-scroll {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-color: #80a3db;
}

#background-image1 {
	z-index: -1;
	opacity: 1;
}

#background-image2 {
	z-index: -2;
	opacity: 1;
}

#background-image3 {
	z-index: -3;
	opacity: 1;
}

#background-image4 {
	z-index: -4;
	opacity: 1;
}

#background-image5 {
	z-index: -5;
	opacity: 1;
}


@-webkit-keyframes fadeOut {
	100%{
		opacity: 0;
	}
}


@keyframes fadeOut {
	100%{
		opacity: 0;
	}
}


.main h1 {
	font: bold 40px "Open Sans", sans-serif;
	margin-bottom: 15px;
	text-shadow: 2px 2px rgb(44, 44, 44);
}

.main h3 {
	font: normal 28px "Open Sans", sans-serif;
	width: 75vw;
	margin-bottom: 40px;
	text-shadow: 2px 2px rgb(44, 44, 44);
}

.main a.btn {
	padding: 20px 46px;
}

.main a.btn:hover {
	opacity: .85;
}

#main-content-area {
	opacity: 0;
	margin-top: 100px;
	-webkit-animation: 1s slidefadeUp 1s forwards;
	        animation: 1s slidefadeUp 1s forwards;
}

@-webkit-keyframes slidefade {
	100% {
		opacity: 1;
		margin: 0;
	}
}

@keyframes slidefade {
	100% {
		opacity: 1;
		margin: 0;
	}
}

@-webkit-keyframes slidefadeUp {
	0%{
		-webkit-transform: translateY(50px);
		        transform: translateY(50px);
	}
	100% {
		opacity: 1;
		margin: 0;
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
}

@keyframes slidefadeUp {
	0%{
		-webkit-transform: translateY(50px);
		        transform: translateY(50px);
	}
	100% {
		opacity: 1;
		margin: 0;
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
}

@media (max-width: 800px) {

	.main {
		min-height: 600px;
	}

	.main h1 {
		font-size: 48px;
	}

	.main h3 {
		font-size: 20px;
		width: 85vw;
	}

	.main a.btn {
		padding: 15px 40px;
	}
}

/*Services Section*/

.services a {
	color: rgb(112, 111, 111);
}

.services a:hover {
	color: #555;
}

.services .grid li {
	padding: 50px;
	-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
	text-align: center;
}

.services .grid li i {
	color: #8c9eff;
}

.services .grid li h4 {
	font-size: 30px;
	margin: 25px 0;
}


@media (max-width: 800px) {
	.services .grid li {
		-ms-flex-preferred-size: 100%;
		    flex-basis: 100%;
		padding: 20px;
	}
}

/* Organizations Section */

.organizations a {
	opacity: 1;
}

.organizations h4 {
	font-size: 20px;
	margin: 80px 0 40px 0;
}

.organizations .grid li{
	padding: 25px;
	-ms-flex-preferred-size: 18%;
	    flex-basis: 18%;
	text-align: center;
}

.organizations .grid img{
	width: auto;
	height: 100px;
}

@media (max-width: 1000px){
	.organizations .grid {
		-ms-flex-preferred-size: 33.3%;
		    flex-basis: 33.3%;
	}
}

@media (max-width: 800px){
	.organizations .grid li{
		-ms-flex-preferred-size: 100%;
		    flex-basis: 100%;
	}
	.organizations .grid img {
		height: 80px;
	}
}


/*Testimonials Section removed*/

/* .testimonials .quote {
	font-size: 22px;
	font-weight: 300;
	line-height: 1.5;
	margin: 40px 0 25px;
}

@media (max-width: 800px) {
	.testimonials .quote {
		font-size: 18px;
		margin: 15px 0;
	}

	.testimonials .author {
		font-size: 14px;
	}
} */

/*Contact Section*/

.contact a {
	color: black;
}

.contact form {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	width: 60%;
}

.contact form .btn {
	padding: 18px 42px;
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	background-color: #8c9eff;
	opacity: 1;
	color: white;
	font-size: 1em;
}

.contact form .btn:hover{
	opacity: .85;
	cursor: pointer;
}

.contact form input {
	padding: 15px;
	margin-right: 30px;
	font-size: 18px;
	color: #555;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

.contact form textarea {
	padding: 15px;
	margin-right: 30px;
	font-size: 18px;
	color: #555;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

.contact .grid li {
	padding: 50px;
	-ms-flex-preferred-size: 33.3%;
	    flex-basis: 33.3%;
	text-align: center;
}

.contact .grid li i {
	color: #8c9eff;
}

.contact .grid li h4 {
	font-size: 20px;
	margin: 25px 0;
}

.contact .grid li p {

	line-height: 1.2;
}

@media (max-width: 1000px) {
	.contact form input {
		-ms-flex-preferred-size: 100%;
		    flex-basis: 100%;
		margin: 0 0 20px 0;
	}

	.contact .grid li {
		-ms-flex-preferred-size: 50%;
		    flex-basis: 50%;
	}
}

@media (max-width: 800px) {
	.contact .grid li {
		-ms-flex-preferred-size: 100%;
		    flex-basis: 100%;
	}
}
/*Footer Section*/

footer {
	font-size: 12px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: center;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	background-color: #484a55;
	color: #fff;
	padding: 20px 0;
}

footer a {
	opacity: .85;
}

footer ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

footer ul li {
	margin-left: 16px;
}

footer p {
	font-size: 14px;
	opacity: 0.6;
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
}


@media (max-width: 1100px) {
	footer {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	footer p {
		text-align: center;
		margin-bottom: 20px;
	}

	footer ul li {
		margin: 0 8px;
	}
} 

@media (max-width: 800px){
	footer p{
		font-size: 14px;
	}
}

@media (max-width: 375px){
	footer p{
		font-size: 13px;
	}
}

/* About Section */

.about {
	background-image: url("../img/divers17.jpg");
	background-size: cover;
	background-color: #80a3db;
}

.about img {
	height: 350px;
	width: auto;
	margin: 0 auto 40px;
}

.about h4 {
	font-size: 1.8em;
}

.about .section-content .column ul {
	list-style: disc;
	margin-left: 40px;
}

@media (max-width: 1200px) {
	.about .column-2 {
		order: 0;
	}
}

/* Services Nav */

#services-nav {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

#services-nav a {
	flex-basis: 50%;
	display: flex;
	align-items: center;
	align-self: flex-start;
}

#services-nav p {
	text-align: center;
	font-weight: bold;
	width: 250px;
	line-height: 20px;
}

#services-nav img {
	width: 200px;
	height: 150px;
	-o-object-fit: cover;
	   object-fit: cover;
}

#services-nav li {
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	opacity: .80;

}

#services-nav li:hover {
	opacity: 1;
}

#services-nav a:nth-child(1) {
	-webkit-animation: enterScreen .5s forwards;
	        animation: enterScreen .5s forwards;
	opacity: 0;
}

#services-nav a:nth-child(2) {
	-webkit-animation: enterScreen .5s .1s forwards;
	        animation: enterScreen .5s .1s forwards;
	opacity: 0;
}

#services-nav a:nth-child(3) {
	-webkit-animation: enterScreen .5s .2s forwards;
	        animation: enterScreen .5s .2s forwards;
	opacity: 0;
}

#services-nav a:nth-child(4) {
	-webkit-animation: enterScreen .5s .3s forwards;
	        animation: enterScreen .5s .3s forwards;
	opacity: 0;
}

@-webkit-keyframes enterScreen {
	0%{
		-webkit-transform: scale(1.1);
		        transform: scale(1.1);
	}
	100%{
		opacity: .85;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
}

@keyframes enterScreen {
	0%{
		-webkit-transform: scale(1.1);
		        transform: scale(1.1);
	}
	100%{
		opacity: .85;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
}


/* Services Page */

.services-page {
	position: relative;
	min-height: 100vh;
	/* background-image: url("../img/homepage/homepage4.jpg"); */
	background-size: cover;
	background-color: #80a3db;
}

.section-content {	
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 25px;
	width: 75%;
	background-color: rgba(236, 236, 236, 0.815);
	margin-top: 100px;
	border: 1px solid black;
	border-radius: 4px;
}

/* .section-content img {
	width: 50%;
	height: auto;
	margin-bottom: 25px;
} */

.section-content h3 {
	text-align: center;
	margin: 20px 0px;
}

.section-content p {
	text-align: left;
}


.section-content ul {
	list-style: disc;
	text-align: left;
	margin-left: 50px;
}

.section-content a {
	color: rgb(0, 0, 0);
	opacity: 1;
}

.section-content a img{
	position: relative;
	display: block;
	opacity: 1;
	margin: 0 auto 20px;
}

.section-content .back-link {
	position: absolute;
	left: 8px;
	top: 8px;
	font-size: 20px;
}

.section-content .back-link a {
	color: black;
	
}

.services-info {
	display: none;
	opacity: 0;
}

.services-info img{
	max-width: 65%;
	height: auto;
}


@media (max-width: 1060px) {
	.section-content{
		width: 90vw;
		margin-top: 210px;
	}
}

@media (max-width: 800px){

	.section-content{
		width: 95vw;
	}
	.section-content img {
		width: 65%;
		height: auto;
	}
}

@media (max-width: 600px){
	.section-content h3 {
		margin-top: 25px;
	}
	.section-content img {
		width: 90%;
		height: auto;
	}
}

@-webkit-keyframes fadeIn{
	100%{
		opacity: 1;
	}
}

@keyframes fadeIn{
	100%{
		opacity: 1;
	}
}

/* Contact Page */

.contact-page{
	position: relative;
	min-height: 100vh;
	background-image: url("../img/divers21.jpg");
	background-size: cover;
	background-color: #80a3db;
}

.contact-page h4 {
	text-decoration: underline;
}


.contact-page a {
	color: black;
}

@media (max-width: 1200px){
	.contact-page .section-gallery .column-2 {
		order: 0;
	}
}

/* Employment */

.employment-page{
	position: relative;
	min-height: 100vh;
	background-image: url("../img/divers22.jpg");
	background-size: cover;
	background-color: #80a3db;
}

.employment-page a{
	color: blue;
}

/* Equipment Page */

.equipment .section-content .section-gallery .column-1 {
	padding: 30px;
	
}


/* Vessel Class Inspections page */

.services-vessel-class-list p{
	text-align: center;
}

.services-vessel-class-list ul{
	list-style: none;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.services-vessel-class-list ul li {
	padding: 10px;
	background-color: rgb(241, 238, 238);
	border-radius: 8px;
	margin: 10px;
	opacity: .80;
	width: 200px;
}

.services-vessel-class-list ul li:hover{
	opacity: 1;
}

.services-vessel-class-list ul li a img {
	width: auto;
	height: 80px;
}

/* Sections with gallery */

.section-gallery {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-gallery .column {
	flex-basis: 50%;
}

.section-gallery .column ul {
	list-style: none;
	margin-top: 10px;
	margin-left: 0px;
}

.section-gallery .column h4 {
	text-align: left;
	font-size: 1.2em;
}

.section-gallery img{
	width: 400px;
	height: auto;
}

.column-2{
	display: flex;
	justify-content: center;
}

.column form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 60%;
	align-items: center;
}

.column form .btn {
	padding: 18px 42px;
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	background-color: #8c9eff;
	opacity: 1;
	color: white;
	font-size: 1em;
}

.column form input {
	padding: 15px;
	margin-right: 30px;
	font-size: 18px;
	color: #555;
	margin-bottom: 10px;
}

.column form textarea {
	padding: 15px;
	margin-right: 30px;
	font-size: 18px;
	color: #555;
	margin-bottom: 10px;
}

@media (max-width: 900px){
	.column form textarea {
		width: 150%;
	}
}


@media (max-width: 1200px) {
	.section-gallery {
		flex-direction: column;
	}
	.column-2 {
		order: -1;
	}
	.image-gallery {
		margin-bottom: 40px;
	}

}



/* Image gallery */

.image-gallery {
	height: 350px;
	width: 350px;
	background-color: white;
}
.image-gallery a img {
	position: absolute;
	height: 350px;
	width: 350px;
	object-fit: cover;
	opacity: 0;
	animation: fadein .4s linear forwards;
}


.image-gallery .image-gallery-buttons {
	height: 350px;
	width: 350px;
	position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	pointer-events: none;
}

.image-gallery .image-gallery-buttons i {
	display: inline-block;
	background-color: white;
	color: black;
	align-self: center;
	padding: 2px;
	pointer-events: all;
	opacity: .60;
}

.image-gallery .image-gallery-buttons i:hover {
	opacity: 1;
	cursor: pointer;
}

.mySlides {
	display:none;
}

@media (max-width: 450px) {
	.image-gallery{
		width: 320px;
		height: 320px;
	}
	.image-gallery a img {
		width: 320px;
		height: 320px;
	}
	.image-gallery .image-gallery-buttons {
		width: 320px;
		height: 320px;
	}
}



/* "X" close button */

.close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
  cursor: pointer;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 30px;
  width: 2px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}