/*******************/
    	/*     Global      */
    	/*******************/    
    	*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: 1s all ease;
        }

        @font-face {
		    font-family: Lora;
		    src: url(./fonts/Lora/Lora-Regular.ttf);
		    font-weight: bold;
		}

        @font-face {
		    font-family: Franchise;
		    src: url(./fonts/Franchise/Franchise-Bold.ttf);
		    font-weight: bold;
		}

/*		body{ 
			background: url(./img/bg.gif);
			background-size: contain;
		}*/

		.mobile{
			display: none;
		}				

		.mobileAudio{
			display: none;
		}

        .main-content{
        	display: flex;
        	justify-content: center;
        	/*margin: 150px 0;*/
        }

        .ropes{
        	display: flex;
        	justify-content: center;
        }

        .rope1, .rope2{
        	box-shadow: 13px -1px 20px 0px rgba(0,0,0,.5);
        }

        .ropes .space{
        	flex-basis: 35vw;
        }

        .bg-bar{
       	    height: 550vh;
		    min-width: 50vw;
		    max-width: 960px;
		    background-color: #2D3A4B;
        }

        .box-shadow{
        	box-shadow: 7px 7px 30px 0px rgba(50, 50, 50, 0.75);
        }

        .cat-img-mobile{
        	display: none;
        }

        .music{
			display: flex;
		    justify-content: center;
		    align-items: center;
		    flex-direction: column;
		    margin-top: 100px;
        }

        .playMe{
        	height: 300px;
        }

		.section-container{
    		position: relative;
    		left: -18vh;
    		height: 50vh;
    		width: 70vw;
    		color: #fff;
		}


		.section-container .box-container__right-box{
    		display: flex;
    		flex-direction: column;
    		align-self: center;
    		height: auto;
    		width: 50%;
    		background-color: #fff;
    		min-height: 400px;
		}


		.section-container .box-container__image-box{
			width: 50%;
		}		

		.section-container .box-container__image-box__img{
		    width: 100%;
    		height: 100%;
		}

		.section-container .box-container__right-box__content{
		    display: flex;
		    flex-direction: column;
		    justify-self: center;
		    align-self: center;
		    height: 100%;
		    align-items: center;
		    justify-content: center;
		    color: #000;
		    font-family: Lora;
    		padding: 20px 50px;		    
		}

		.section-container .box-container__right-box__content .top-h3-line{
		    width: 100%;
		    background-color: rgba(204, 193, 165, .8);
		    border: 0px;
		    height: 1px;	
		}

		.section-container .box-container__right-box__content .top-h1-line-1,
		.section-container .box-container__right-box__content .top-h1-line-2,
		.section-container .box-container__right-box__content .bottom-h1-line-1,
		.section-container .box-container__right-box__content .bottom-h1-line-2 {
		    width: 100%;
		    background-color: rgba(55, 55, 57, .2);
		    border: 0px;
		    height: 2px;
		    margin: 5px;
		}

		.section-container .box-container__right-box__content .top-h1-line-1,
		.section-container .box-container__right-box__content .bottom-h1-line-2 {
    		width: 85%;
		}

		.section-container .box-container__right-box__content .h3-title{
    		margin: 20px 0 10px 0;
    		color: #C8AB87;
    		font-size: 25px;
    		text-align: center;
		}

		.section-container .box-container__right-box__content .h1-title{
			font-family: Franchise;
			color: #59717E;
    		font-size: 60px;
    		margin-top: 15px;
    		text-align: center;
		}

		.section-container .box-container__right-box__content .description{
		    display: flex;
		    justify-content: center;
		    line-height: 2;
		    font-size: 15px;
		    text-align: center;
		}		   

		.section-container .img-box{
		    position: relative;
		    top: 100%;
		    left: 30%;
		    z-index: 2;
		    width: 70%;
		}		

		.section-container .img-box__img{
		    width: 100%;
    		height: 100%;
		}		     

    	/*********************/
    	/*     Splash Box    */
    	/*********************/
        .splash-section{
		    height: 60vh;
		    width: 100%;
		    color: #fff;
        }

        .splash-section .logo{
    		position: relative;
    		z-index: 5;        	
    		font-family: Franchise;
		    /* TODO: fix fonts*/
		    font-size: 150px;
        }

        .splash-section .logo-picture-box{
        	width: 100%;
        	z-index: 2;
        }

        .splash-section .logo .logo__span{
			text-shadow: 5px 5px rgba(0, 0, 0, .2);
        }        

        .splash-section .grey-box{
            display: flex;
    		justify-content: center;
		    height: 100%;
		    position: relative;
	/*	    top: -8vh;
		    left: 5vw;
		    width: 90%;*/
		    background-color: rgba(75, 89, 100, 0.8);   
		    font-family: Lora;   	
        }

        .splash-section .grey-box__content{
            width: 25vw;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		height: 100%;
        }

        .splash-section .grey-box__header{
    		width: 16vw;
    		font-size: 50px;
    		line-height: 2;
        }

		.splash-section .grey-box__content__description{
    		margin: 20px 0;
    		line-height: 2;
		}        

		.splash-section .logo-img{
			width: 100%;
			height: 100%;
		}

		.cat-img{
		    position: absolute;
		    top: 25%;
		    left: calc( -6vw - 200px);
		    height: 50%;
		    animation: catAni 2s ease;		
		}

		@keyframes catAni{
			0%{
				left: 25vw;
			}

			100%{
				left: calc( -6vw - 200px);
			}
		}

    	/*******************/
    	/*     2nd Box     */
    	/*******************/
		.second-section{
    		top: 20vh;
		}

		.second-box{
			display: flex;
			position: relative;
			height: 90%;
			width: 90%;
			z-index: 3;	
		    top: 0;
    		left: 0;		
		}	

		.section-container .green-box{
		    position: relative;
		    top: -85%;
		    height: 100%;
		    background-color: #D0D45C;
		    width: 90%;
		    left: 5%;
		    opacity: .9;
		}
 
		.second-section  .box-container__image-box{
			display: none;
		}

		.circleTop{
		    border-top-left-radius: 7vw;
    		border-top-right-radius: 7vw;
    		height: 7.5vw;
    		width: 15vw;
    		background-color: yellow;
    		opacity: 0;

    		position: absolute;
		    top: -25%;
		    left: 60%;
		    opacity: 0;
		    /*animation: circleAniTop 4s ease;*/		
		    /*transform: rotate(90deg);*/
		}

		@keyframes circleAniTop{
			0%{
				/*transform: rotate(0deg);*/
				left: 150%;
				top: 15%;

				opacity: 1;
			}

			25%{
				left: 60%;
			}

			100%{
				top: -25%;
				opacity: 0;
 				/*transform: rotate(90deg);*/
			}
		}			

		.circleImg{
    		height: 15vw;
    		width: 15vw;
    		opacity: 1;

    		position: relative;
    		top: -150%;		
    		opacity: 0;
    		/*animation: circleImgAni 6s ease;*/		
		}

		@keyframes circleImgAni{
			0%{
				top: -70%;
				opacity: 0;
			}

			50%{
				
			}

			80%{
	
			}

			100%{
				top: -150%;
				opacity: 1
			}
		}		

		.circleBtm{
		    border-bottom-left-radius: 7vw;
    		border-bottom-right-radius: 7vw;
    		height: 7.5vw;
    		width: 15vw;
    		background-color: red;
    		z-index: 2;

    		position: absolute;
		    top: 54%;
		    left: 60%;
		    /*animation: circleAni 2s ease;	*/
		    opacity: 0;
		}		

		@keyframes circleAni{
			0%{
				left: 150%;
			}

			50%{
				left: 60%;
			}

			80%{

			}

			100%{
				
			}
		}

    	/*******************/
    	/*     3rd Box     */
    	/*******************/
		.third-section{
    		top: 10vh;
		}

		.section-container .box-container{
		    display: flex;
		    position: relative;
		    top: 25%;
		    left: 10%;
		    height: 90%;
		    width: 90%;
		    z-index: 3;
		}		

		.third-section .img-box{
			position: relative;
		    top: 100%;
		    left: 57%;
		    z-index: 2;
		    width: 35%;
		}

		.section-container .white-box{
		    position: relative;
		    top: -100%;
		    height: 100%;
		    background-color: #fff;
		    width: 90%;
		    left: 5%;
		    opacity: .9;
		}

    	/*******************/
    	/*     4th Box     */
    	/*******************/																		
		.fourth-section{
			top: 75vh;
		}

		.fourth-section .brown-box{
		    position: relative;
		    top: -85%;
		    height: 100%;
		    background-color: #A6825C;
		    width: 90%;
		    left: 5%;
		    opacity: .9;
		}

		.fourth-section .lights{
			display: flex;
			justify-content: center;
    		align-items: center;
    		width: 100%;			
		}

		.fourth-section .second-box{
			left: 3vw;
		}

		.fourth-section .lights img{
		    width: 30%;
    		height: 80%;
    		animation: lightUp 6s infinite;
    		filter: drop-shadow(10px 10px 30px);
		}

    	.fourth-section .brown-box-words{
    		position: relative;
    		top: -50vh;
    		left: 20vw;    		
    	}		

		@keyframes lightUp{
			0%{
				filter: drop-shadow(10px 10px 30px);
			}

			50%{
				filter: drop-shadow(0px 0px 0px);
			}

			100%{
    			filter: drop-shadow(10px 10px 30px);
			}
		}		

		/*******************/
    	/*     5th Box     */
    	/*******************/	
/*    	.fifth-section{
    		top: 130vh;
    	}	*/

    	.fifth-section{
    		top: 130vh;
    		left: -8vw;
    		height: 63vh;	
    	}

    	.fifth-section .box-container__right-box{
    		width: 80vw;
    		min-width: 500px;
    		z-index: 2;
    		position: relative;
    		left: -150px;    		
    	}

    	.fifth-section .box-container__right-box__content{
    		width: 85%;
    	}

    	.fifth-section .book_container{
    		display: flex;
   			justify-content: center;
    		align-items: center;
    		width: 70%;    
    		flex-direction: column;		
    	}

    	.fifth-section .book_title{
    		margin: 0 0 10px 0;
    		font-size: 1.5vw;
    	}    		

    	.fifth-section .miniPalsImg{
    		min-height: 100%;
    		width: 100%;
    	}

		/*******************/
    	/*     6th Box     */
    	/*******************/	
    	.sixth-section{
    		top: 155vh;
    		left: -17vw;   		
    	}

    	.sixth-section .box-container__right-box{
    		width: 80vw;
    	}

    	.sixth-section .box-container__right-box__content{
    	/*	width: 85%;*/
    	}

    	.sixth-section .book_container{
    		display: flex;
   			justify-content: center;
    		align-items: center;
    		width: 70%;    
    		flex-direction: column;	
    		margin: 10vh 0;	
    	}

    	.sixth-section .book_title{
    		margin: 0 0 50px 0;
    		font-size: 1.5vw;
    		color: white;
    	}

    	/*******************/
    	/*     Footer      */
    	/*******************/	
		.footer{
		    position: relative;
		    /*top: 130vh;*/
		    left: 30vh;
		    height: 22vh;
		    width: 40vw;
		    color: #fff;
		    background-color: #4B5964;
		    opacity: .9;			
		    font-family: Franchise;
    		top: 175vh;    
		}

		.footer-content{
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    height: 100%;
		    font-size: 70px;			
		}

    	/***********************
                 Shop
    	***********************/
    	.shop{
			position: fixed;
		    top: 10px;
		    right: 20px;    		
    		height: 150px;
    		width: 150px;
		    z-index: 20;
    	}

    	.shopImg{
    	    width: 100%;
    		height: 100%;
    	}

    	/*****************
              Guide
		*****************/
		.book_container{
		    display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    		color: #fff;
    		height: 100%;
    		font-size: 1.2vw;
    		cursor: pointer;
		}

		.book_title{
			margin: 0px 50px 20px 0px;
		}

		@media screen and (min-width: 2000px){
			.third-section {
			    top: 0vh;
			}

			.fourth-section{
				top: 85vh;
			}

			.sixth-section {
				width: 100vw;
			}

			.sixth-section .box-container__right-box {
			    width: 15vw;
			}

			.miniPalsImg{
				width: 55vw;
			}
		}