html {
				font-size: 100%;
			}
			
			body {
				height:100%;
				margin: 0;
					}

			p {
				position: relative;
				display: inline;
				font-weight: 400;
				display: inline;
				font-family: Montserrat;
			}



			.labels {
			 	position: absolute;
	  			margin-left: auto;
				margin-right: auto;
				padding-bottom: 30px;
				top: 30px;
				left: 10%;
				right: 10%;
	  			padding: auto auto;
    			z-index: 1;
    			text-align: center;
    			font-size: 1.5vmax;
    			 opacity: 1;
  				 transition: opacity .25s ease-out;
   				-moz-transition: opacity .25s ease-out;
   				-webkit-transition: opacity .25s ease-out;
			}

			img {
				height: 70%;
				width: auto;
				margin-top: -100px;
				margin-bottom: -50px;

			}

			.labels:hover {
				opacity: 0;
			}

			.hidden {
				position: absolute;
	  			margin-left: auto;
				margin-right: auto;
				top: 60px;
				left: 10%;
				right: 10%;
	  			padding: auto auto;
    			z-index: 1;
    			text-align: center;
    			font-size: 1.3vmax;
    			opacity: 0;
   transition: opacity .5s ease-in;
   -moz-transition: opacity .5s ease-in;
   -webkit-transition: opacity .5s ease-in;
			}

			.hidden:hover {
					opacity: 1;
			}


			h1 {
				position: absolute;
	  			margin-left: auto;
				margin-right: auto;
				top: 30px;
				left: 10%;
				right: 10%;
	  			padding: auto auto;
    			z-index: 1;
    			text-align: center;

			}


			@keyframes fadeIn {
			  0% {
			    opacity: 0;
			  }

			  100% {
			    opacity: 1;
			  }
			}

			.fadeIn {
			  -webkit-animation-name: fadeIn;
			  animation-name: fadeIn; }


			ul {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
				font-size: 0px;
			}


			li {
			height: 100%;
			display: block;
			position: absolute;
			background-size: cover;
			width: 33.333%;
			font-size: 1.3vmax;
			font-family: Montserrat;
			font-weight: 400;
			color: #000000;
			line-height: 170%;
			-webkit-transition: 3s ease;
			-moz-transition: 3s ease;
			-o-transition: 3s ease;
			-ms-transition: 3s ease;
			transition: 3s ease;
			}

		
			li.iceland {
				background-image: url(Iceland.jpg);
				background-position: left top;
				left: 0;
			}

			li.tahiti {
				background-image: url(Tahiti.jpg);
				background-position: center top;
				left: 33.3333%;

			}

			li.india {
				background-image: url(India.jpg);
				background-position: right top;
				left: 66.6666%;

			}

			
			li.selected {
				width: 100%;
				left: 0;
				z-index: 100;

			}

			.tab-content {
					width:80%;
					max-width:500px;
					top: 50%;
					left: 50%;
					display: none;
					position: absolute;
					height: 300px;
					text-align: center;

					transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
					-moz-transform: translate(-50%, -50%);
					
			}


			#fadepink  {
				color: #0F1559;
				-webkit-animation-name: pink; /* Chrome, Safari, Opera */
   				-webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
    			animation-name: pink;
    			animation-duration: 6s
			}

			/* Chrome, Safari, Opera */
			@-webkit-keyframes pink {
			    from {color: #F227D7;}
			    to {color: #0F1559;}
			}

			/* Standard syntax */
			@keyframes pink {
			    from {color: #F227D7;}
			    to {color: #0F1559;}
			}


			#fadeorange {
				color: #0753a9;
				-webkit-animation-name: orange; /* Chrome, Safari, Opera */
   				-webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
    			animation-name: orange;
    			animation-duration: 6s
			}

			/* Chrome, Safari, Opera */
			@-webkit-keyframes orange {
			    from {color: #FCEB68;}
			    to {color: #0753a9;}
			}

			/* Standard syntax */
			@keyframes orange {
			    from {color: #FCEB68;}
			    to {color: #0753a9;}
			}


			#fadeyellow {
				color: #FFF5A8;
				-webkit-animation-name: yellow; /* Chrome, Safari, Opera */
   				-webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
    			animation-name: yellow;
    			animation-duration: 6s
			}

			/* Chrome, Safari, Opera */
			@-webkit-keyframes yellow {
			    from {color: #FF4000;}
			    to {color: #FFF5A8;}
			}

			/* Standard syntax */
			@keyframes yellow {
			    from {color: #FF4000;}
			    to {color: #FFF5A8;}
			}


		

			.tab-label {
				height: 100%;
				opacity: .1;
				padding: 5px;
				cursor: pointer;
				background-color: #fff;
			}

			.tab-label:hover {
				opacity: 0;
			}
			
		
			
			.tab-label h4: hover {
				opacity: 1;
			}

			.selected .tab-label {
				background-color: #fff;
				border-bottom-color: #fff;
				z-index: 100;
				position: relative;
				/* z-index + position relative pushes it forward */
			}


		@media (max-width: 1200px) and (min-width: 400px) {

			.labels {
		    	font-size: 2vmax;
				}


			.hidden {
	    		font-size: 1.8vmax;
	    		}

			li {
				font-size: 2vmax;
				}

			img {
				height: 60%;
				width: auto;
				margin-top: -100px;
				margin-bottom: -20px;

			}
  		

		@media (max-width: 800px) and (min-width: 400px) {

			.labels {
		    	font-size: 1.9vmax;
				}


			.hidden {
	    		font-size: 1.7vmax;
	    		padding-top: 30%;
	    		line-height: 156%
	    		}

			li {
				font-size: 1.9vmax;
				}

			img {
				height: 50%;
				width: auto;
				margin-top: -100px;
				margin-bottom: -20px;

			}