@keyframes colorChange {
    /* 25% {color: #333;} */
    50% {color: #ffD20A;}
    100% {color: #2E2E88;}
}

::-webkit-scrollbar {
	display: none;
}

html {
	height: 100%;
}
body {
	height: 100%;
	margin: 0;
	color: #333;
	background-color: white;
	font-family: 'Roboto Condensed', sans-serif;
}

.animate1 {
    animation-name: colorChange;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    color: #2E2E88;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*top nav bar */

#vid {
	width: 100%;
	margin-top: 8%;
}

.top {
	position: fixed;
	width: 100%;
	height: 8%;
	top: 0;
	background-color: #333;
	color: white;
	transition: 0.3s;
	z-index: 10;
}

.top-left {
	position: absolute;
	left: 3%;
	height: 100%;
}

.top-left a {
	text-decoration: none;
	color: white;
}

.top-left h2 {
	display: inline;
	font-size: 3vh;
}

.top-left img {
	width: auto;
	max-height: 75%;
	transform: translateY(1vh);
}

.nav-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.nav-center  h1 {
	display: inline-block;
}

.pc-nav {
	display: none;
}

.pc-nav-right {
	display: none;
}

.top-right {
	position: absolute;
	right: 3%;
	top: 2vh;
	font-size: 4vh;
}

#active {
	color: #FFD20A;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Side Menu*/
.side-menu {
	width: 100%;
	height: 100%;
	background-color: #333;
	overflow-x: hidden;
	position: fixed;
	left: 100%;
	z-index: 1;
	top: 0;
	transition: 0.3s;
}

/*.side-menu span {
	display: block;
	text-align: right;
	font-size: 8em;
	color: #2E2E88;
}*/

#close-btn {
	margin: 3%;
	position: fixed;
	right: 0%;
	display: none;
	font-size: 10vw;
	color: white;
}

.nav-links {
	width: 70%;
	margin: auto;
}

.side-menu a {
	text-decoration: none;
	display: block;

	color: white;
	padding: 5% 0px;
	font-size: 6vw;
	transition: 0.3s;
	width: max-content;
	cursor: pointer;
}

.side-menu .image {
	/*min-width: 60%;*/
	width: 70%;
	margin: auto;
}

.side-menu .image img {
	width: 100%;
	margin-top: 20%;
}

/*Search*/

.search {
	width: 70%;
	height: 4.1%;
	margin: 40px auto;
}

.search table {
	width: 100%;
	height: max-content;
	border: 2px solid #cccccc;
	background-color: #f5f5f5;
	border-radius: 20px;
	margin-top: 2vh;
}

.td2 {
	width: 1%;
	overflow: hidden;
}

.search input {
	width: 100%;
	line-height: 2;
	border: none;

	border-radius: 10px;
	background-color: transparent;
	font-size: 4vw;
	outline: none;

	padding-right: -10px;
	overflow: hidden;
}

.search span {
	font-size: 6vw;
	margin-top: 1vh;

	border-radius: 10px;
	height: 100%;
	width: 100%;
	color: #cccccc;
}

/*Media Links*/

.media-links {
	width: max-content;
	margin: 4vh auto;
}

.media-links a {
	text-decoration: none;
	text-align: center;
	display: inline;
	padding: 2vw;
	color: #cccccc;
	font-size: 10vw;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Pages*/

.pages {
	height: 100%;
	width: 100%;
	text-align: center;
}

.pages img {
	width: 100%;
	margin-top: 10%;
}

.pages .header {
	margin-bottom: 0px;
}

.pages h1 {
	width: 90%;
	font-size: 10vw;
	padding: 10% 0 10px 0;
	margin-left: 5%;
	text-align: left;
	font-family: 'Fjalla One', sans-serif;
}

.pages p {
	/*width: ;*/
	line-height: 2;
	font-size: 4vw;
	margin: 0 5%;
	text-align: left;
	font-family: 'Roboto Condensed', sans-serif;
}

.pages h2 {
	width: 90%;
	margin: 0 auto 20px auto;
	text-align: left;
	font-size: 6vw;
	font-family: 'Roboto Condensed', sans-serif;
}

.pages h3 {
	font-family: 'Roboto Condensed', sans-serif;
}

.page {
	min-height: max-content;
	overflow: hidden;
	/*position: relative;*/
	width: 100%;
	/* border-top: 1px solid #cccccc; */
	/* border-bottom:1px solid #cccccc; */
}

.page button {
	margin: 5vh 0vw;
	border: 3px solid #2E2E88;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 20px;
	background-color: #2E2E88;
	color: white;
	width: 45%;
	height: max-content;
	line-height: 2;

	font-size: 4vw;
	font-weight: bold;

	outline: none;
	transition: 0.3s;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Page 1*/
/* 
.page1 img {
	margin: 50px 0px 50px 0px;
}
 */

.page1 {
	min-height: max-content;
	background-color: #333;
	color: white;
	padding-bottom: 5%;
}

.page1 .left h1 {
	text-align: center;
	padding: 0;
	margin: 0;
	font-size: 20vw;
	padding-top: 20px;
	width: 100%;

	background-image: linear-gradient(to right, #2E2E88,#ffd20A);
    background-clip: text;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

/* #pc-text {
	display: none;
} */

.page img {
	border-radius: 20px;
}

.page1 .image-slide img {
	margin: 4vh 0;
	width: 80%;
	border-radius: 0;
}

.slide-controls {
	margin-bottom: 20px;
}

.slide-controls .curr-slide {
	color: #FFD20A;
}

.page1 p {
	padding-bottom: 14vw;
	text-align: center;
	/* font-family: 'Pacifico', cursive; */
}

.page1 .right img {
    width: 100%;
    /* border-radius: 10px; */
}

.page1 button {
	margin-top: 0;
}

/* .page1 .right {
	display: none;
} */

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Page 2*/

.hidden {
	display: none;
}

.pc-hidden {
	display: block;
}

.page2 img {
	width: 90%;
	margin: 30px 0;
}

.page2 h1 {
	font-size: 7vw;
	text-align: center;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Page 3*/

.page3 {
	background-color: #333;
	color: white;
}

.page3 img {
	width: 100%;
}

.blocks-container {
	width: 100%;
	height: max-content;
	overflow-x: scroll;
	scroll-behavior: smooth;
}

.blocks {
	width: 200%;
}

table {
	width: 100%;
	text-align: left;
	line-height: 1.5;
}

table td {
	width: 25%;
}

.slide-dots {
	margin: 3% 0px 5% 0px;
}

.slide-dots span {
	margin: 5px;
}

.fa-circle {
	color: #2E2E88;
	font-size: 5vw;
}

.fa-circle-o {
	color: #FFD20A;
	font-size: 5vw;
}

.page3 .btns {
	margin: 50px 0px;	
}

.page3 button {
	display: inline;
	width: 40%;
	margin: 10px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Page 4*/
.pc-grid {
	display: none;
}

.grid-container {
	width: 95%;
	margin: auto;
}

.column { 
	float: left;
	width: 47%;
	padding: 0 1%;
}

.column img {
	margin: 1%;
	width: 100%;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*About Page*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


.about-page1 .left .right img {
	width: 90%;
	margin-bottom: 40px;
}

.about-page1 h1 {
	padding-top: 15%;
	margin-left: 30px;
}

.about-page2 {
	background-color: #333;
	color: white;
	padding: 10% 0; 
}

.about-page2 h1 {
	padding-top: 0px;
	/*padding-bottom: 40px;*/
}

.about h3 {
	display: block;
	font-size: 5vw;
	text-align: left;
	margin-left: 5%;
	margin-top: 5vw;
}

.about-page3 div p {
	margin: 5vh auto;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Contact Page*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.contact {
	margin-top: 10%;
}

.contact-page1 h1 {
	text-align: center;
}

#msg-btn {
	border-color: #2E2E88;
	/* background-color: #f5f5f5; */
	color: white;
	width: 60%;
}

.contact .right {
	display: none;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Experience Page*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.xp h1 {
	/* margin-top: 10vh; */
	margin-bottom: 0;
	margin-left: 30px;
}

.xp img {
	margin-bottom: 30px;
	width: 90%;
}

.xp-page1 h1 {
	margin-top: 15%;
}

.xp-page2 {
	background-color: #333;
	color: white;
}

.xp-page4 img {
	border-radius: 10px;
}

.xp-page3 h1 {
	margin-bottom: 30px;
}

.xp #page3-btn {
	display: none;
}

.xp .column { 
	float: left;
	width: 47%;
	padding: 0 1%;
}

.xp .column img {
	margin: 0%;
	width: 100%;
}

.xp .row:after {
	content: "";
	display: table;
	clear: both;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Services Page*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.services img {
	width: 90%;
	margin-top: 0;
	margin-bottom: 10%;
}

.services-page1 h1, .services-page2 h1, .services-page3 h1, .services-page4 h1 {
	text-align: left;
	margin-left: 30px;
}

.services-page1 {
	padding-bottom: 10%;
}

.services-page1 h1 {
	font-size: 8vw;
	margin-top: 6vh;
}

.services ul li {
	text-align: left;
	font-size: 5vw;
	margin: 5%;
}

.s-btns {
	margin-top: 30px;
}

.s-btns button {
	display: inline-block;
	margin: 2%;
	width: 40%;
	color: #cccccc;
	border-color: #cccccc;
	font-size: 4vw;
}

.s-btns .btn2 {
	border-color: #333;
	color: #333;
}

.services-page2 {
	background-color: #333;
	color: white;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Message button*/
.message-btn {
	position: fixed;
	bottom: 3%;
	right: 2%;
}

.message-btn span {
	padding: 50%;
	transform: translateX(-50%);
	font-size: 4vh;
	background-color: #FFD20A;
	color: white;

	border-radius: 50%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Message block*/
.message-block {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 0;

	background-color: white;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

	z-index: 1;
	overflow-y: scroll;
	transition: 0.3s;
	text-align: center;
}

.message-block label {
    font-size: 4vw;
}

.message-block div {
	margin: 20px 5%;
	text-align: left;
}

.message-block span {
	position: absolute;
	right: 2%;
	font-size: 8vw;
	margin: 2%;
	color: #333;
}

.message-block h1 {
	text-align: center;
	font-size: 8vw;
}

.message-block input {
	width: 70%;
	border: 1px solid #cccccc;
	background-color: #f5f5f5;
	border-radius: 5px;
	margin-top: 5px;
	font-size: 4vw;
	padding: 1vh 2vw;
}

.message-block select, .message-block textarea {
	width: 60%;
	border: 1px solid #cccccc;
	background-color: #f5f5f5;
	border-radius: 5px;
	margin-top: 5px;
	font-size: 4vw;
	padding: 1vh 2vw;
}

.message-block textarea {
	width: 90%;
	height: 200px;
	font-size: 4vw;
	resize: none;
	background-color: #f5f5f5;
	border: 2px solid #cccccc;
}

.message-block button {
	width: 45%;	
	line-height: 2;
	margin: 20px;
	background-color: #2E2E88;
	color: white;
	font-size: 4vw;
	font-weight: bold;
	outline: none;
	border-radius: 5px;
	margin-left: 27.5%;
	height: max-content;
	border-radius: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.message-block button:hover {
	border-color: #FFD20A;
	color: #FFD20A;
}

#msg {
    margin-left: 10px;
    color: red;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Footer*/

.footer {
	width: 100%;
	color: white;
	/* border-top: #cccccc; */
	background-color: #333;
	padding: 1vh 0px;
	margin-top: 10vh;
    /* background-image: linear-gradient(to bottom right,#2E2E88, #333); */
}

.footer div {
	margin: 10% 0;
}

.footer h2 {
	padding: 20px 0px;
	text-align: center;
}

.footer h3 {
	font-size: 5vw;
	text-align: left;
	margin-left: 50px;
}

.footer p {
	text-align: left;
	margin-left: 50px;
}

.footer .footer-cont a {
	text-decoration: none;
	background-color: white;
	color: #333;
	display: inline;
	padding: 3% 5%;
	margin: 2vw;
	border: 3px solid #cccccc;
	border-radius: 5px;
	font-size: 4vw;
}

.footer a:hover {
	border-color: #FFD20A;
	color: #FFD20A;
}

.copy-right {
	font-size: 4vw;
}

.copy-right a {
    text-decoration: none;
    color: white;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* IMAGE VIEWER */
.viewer-cont {
    position: fixed;
    top: 0;
    left: 0;
    
    z-index: 31;
    width: 100%;
    height: 100%;

    display: none;
}

.image-viewer {
	text-align: center;

    background-color: white;
	overflow-y: hidden;

    width: 100%;
    height: 100%;
}

.image-viewer h1 {
    position: absolute;
    left: 2%;
    top: 2%;
    font-size: 8vw;
    margin: 0;
}

.image-viewer #img-close {
    position: absolute;
    font-size: 10vw;
    right: 2%;
    top: 2%;
}

#img-back {
    position: absolute;
    left: 30%;
    bottom: 2%;
    font-size: 15vw;
}

#img-next {
    position: absolute;
    right: 30%;
    bottom: 2%;
    font-size: 15vw;
}

.image-viewer img {
	position: absolute;
    max-width: 90%;
	max-height: 70%;
	left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* SEARCH RESULTS */
.search-results {
    position: fixed;
    z-index: 51;
	top: 0;
	left: 0;

    background-color: white;
	overflow-y: scroll;
    overflow-x: hidden;

    width: 100%;
    height: 100%;
    display: none;
}

.search-results h1 {
    position: absolute;
    left: 2%;
    top: 2%;
    font-size: 10vw;
    margin: 0;
}

.search-results h2 {
	font-size: 8vw;
}

.search-results p {
	font-size: 4vw;
	/* color: #2E2E88; */
}

.results {
    height: max-content;
    margin-top: 15%;
}

.results a {
    text-decoration: none;
	color: #2E2E88;

    display: block;
    padding: 2vh 2vw;
}

.search-results #search-close {
    position: absolute;
    font-size: 8vw;
    right: 2%;
    top: 2%;
}