/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
	
	@font-face{
		font-family: cocaColaFont;
		src: url(../fonts/lokicola.ttf);
	}

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
		

		
		body{
			padding-top: 30px;
			padding-bottom: 5px;
			background-color: #FFF;
		}
		
		p{
			font-family: 'Open Sans', sans-serif;
		}
		
		h1{
			font-family: 'Merriweather', serif;
		}
		
		h2, h3, h5, h6{
			font-family: 'Oswald', sans-serif;
		}
		

		
		#museumContainer{
			display: none;
			
		}
		
		#page_body{
			display: block;
			margin-top: 10px;
		}
		
		#main_3d_image{
			 
			background-image: url(../assets/images/model_bg-480.jpg);
			background-repeat: no-repeat;
			height: 300px;
		}
		
		
		#main_text{
			float: left;
			margin: 5%;
			width: 60%;
			display: block;
			background-color: rgba(255, 255, 255, 0.8);
			padding:10px;
			border-radius: 5px;
			border-style: solid;
			border-width: 2px;
			margin-top: 600px;
			margin-left: 20%;
		}
		
		#main_text h2{
			color: rgba(0, 102, 153, 1);
			font-size: 20px;
			margin-top: 0px;
			margin-bottom: 5px;
		}
		
		#main_text h3{
			font-size: 15px;
			margin-top: 5px;
			margin-bottom:5px;
		}
		
		#main_text p{
			font-size: 12px;
			margin: 0px;
			line-height: 1.2;
		}
		.navbar{
			padding-top: 0px;
			background-image: url("../assets/images/banner.jpg");
			height: 60px;
			border-style: solid;
			border-color: black;
			border-top: 2px;
			border-left: 2px;
			border-right: 2px;
			
		}
		
		.thumbnail{
			margin-top: 0px;
			margin-bottom: 20px;
		}
		
		.thumbnail > img{
			width: 100%;
		}
		.logo{
			margin-top: -200px;
			margin-left: 0px;
		}
		.logo h1{
			font-family: 'Merriweather', serif;
			color: black;
			font-size: 15px;
			margin: 0;
			margin-top: 4px;
			margin-bottom: 0px;
			margin-right: -10px;
			float: left;
			padding-top: -100px;
			padding-left: 0px;
			padding-right: 2px;
		}
		
		/*.logo h2{
			font-family: cocaColaFont;
			font-size: 62px;
			margin-top: -12px;
			margin-bottom: -30px;
			padding-top: 0px;
			padding-left: 0px;
			padding-right: 6px;
			float: left;
		}

		
		.logo h3{
			font-size: 26px;
			margin-top: 0px;
			margin-bottom: 10px;
			padding-top: 0px;
			float: left;
		}
		*/
		
		.logo p{
			font-size: 14px;
			margin-top: 0px;
			margin-bottom: 0px;
			padding-top: 0px;
			padding-left: 8px;
		}
		
		.navbar .container{
			min-height: 50px;
			
		}
		.navbar-fixed-top{
			
		}
		
		.navbar-toggle{
			
		}
		
		.navbar-default .navbar-brand{
			color: #fff;
		}
		
		.navbar-default .navbar-brand:hover{
			color: green;
		}
		
		.navbar-default{
		}
		
		.navbar .nav {
			margin-right: 0px;
			
		}
		
		.navbar-toggle{
			background-color: #556B2F;
		}
		.navbar-toggle > a:hover{
			background-color: #556B2F;
		}
		
		.navbar .nav > li  > a{
			font-family: 'Merriweather', serif;
			margin-left: 0px;
			font-size: 12px;
			border-style: solid;
			border-top: 2px;
			border-left: 2px;
			border-right: 2px;
			border-color: gold;
		}
		.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
			/*color: green;*/
			background-color: #556B2F;
		}
		
		.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >  a:hover, .navbar-default .navbar-nav > .active > a:focus {
			color: white; /* Font color for active font */
			background-color: #556B2F; /* Blue color for background */
		}
		
		.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
			background-image: url("../assets/images/banner.jpg")
		}
		
		.navbar-default .navbar-nav > li > a{
			color: white;
			background-color: #556B2F;
			
		}
		
		.navbar-preheader.navbar-toggle:hover{
			background-color: white;
		}
		
		.navbar-preheader .navbar-toggle .icon-bar{
			background-color: white;
		}
		
		.navbar-preheader .navbar-toggle:hover .icon-bar{
			/*background-color: red;*/
		}
		
		#myNavbar{
			width: 100%;
			margin-top: 1px;
		}
		
		.footer{
			color: #FFF;
			margin-top: 30px;
			background-color: #556B2F;
			height: 50px;
		}
		
		.navbar-text > a{
			color: white;
			font-size: 12px;
			text-decoration: none;
		}
		
		.cameraBtns{
			border-color:black;
			border-style:solid;
			border-width:0px;
			margin-top:10px;
			padding: 5px;
		}
		
		.cameraBtns > p{
			font-size:15px;
			color:white;
			padding-left:4px;
		}
		
		.otherBtns > p{
			color:white;
		}
		
		p.thicker{
			font-weight: 900;
		}
		
		.btn-responsive{
			padding:4px6px;
			font-size: 50%;
			line-height:1.2;
			border-radius:3px;
			white-space:normal!importanr
		}
		
		#galleryHeader{
			padding-top: 2px;
			padding-bottom: 2px;
			margin: 0px;
			background-color:  #556B2F;
			
			border-style: solid;
			border-top: 2px;
			border-left: 2px;
			border-right: 2px;
			border-color: gold;
			
			
		}
		#contentButtons{
			z-index: 100;
			position: relative;
			
			/*margin-right: -100%;*/
			width: 100px;
			padding-right: -20px;
		}
		
		#modelContainer{
			margin-top: -230px;
			height: 280px;
			z-index: -2;
		}
		
		#galleryHeader h1{
			font-size: 20px;
			color: white;
		}
		
		#selectModelButtons{
			margin-top: 20px;
			padding-top: 10px;
			padding-bottom: 10px;
			background-color:  #556B2F;
			border-style: solid;
			border-left: 4px;
			border-right: 4px;
			border-color: gold;
		}
		
		#selectModelButtons img{
			size: 200%;
		}
		
		#selectSpearModelButtons{
			margin-top: 20px;
			padding-top: 10px;
			padding-bottom: 10px;
			background-color:  #556B2F;
			border-style: solid;
			border-left: 4px;
			border-right: 4px;
			border-color: gold;
			
		}
		
		#selectSwordModelButtons{
			margin-top: 20px;
			padding-top: 10px;
			padding-bottom: 10px;
			background-color:  #556B2F;
			border-style: solid;
			border-left: 4px;
			border-right: 4px;
			border-color: gold;
		}
		
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
		#page_body{
			display:block;
		}
		
		#museumContainer{
			display: none;
		}
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
		.navbar-default{
			padding-top: 10px;
			background-image: url(../assets/images/banner_cropped.jpg);
			/*background-repeat: no-repeat;*/
			height: 62px;
			
			border-bottom: 2px;
			border-style:solid;
			border-color: #556B2F;
			/*width: 800px;
			display: block;*/
		}
		
		.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
			/*color: green;*/
			background-color: rgba(255, 255, 255, 0);
		}
		
		.navbar-default .navbar-nav > li > a{
			color: white;
			background-color:rgba(255, 255, 255, 0);
			
		}
		.logo{
			margin-top: -110px;
			margin-left: 0px;
		}
		.logo h1{
			font-family: 'Merriweather', serif;
			color: black;
			font-size: 20px;
			margin: 0;
			margin-top: 4px;
			margin-bottom: 0px;
			float: left;
			padding-top: 100px;
			padding-left: 0px;
			padding-right: 4px;
		}
		
		.navbar .nav > li  > a{
			margin-left: 4px;
			font-size: 12px;			
			border-style: none;
			border-top: 2px;
			border-left: 2px;
			border-right: 2px;
			border-color: gold;
		}
		.navbar .nav {
			margin-right: 10px;
		}
		
		#main_3d_image{
			background-image: url(../assets/images/model_bg-768.jpg);
			background-repeat: no-repeat;
			height: 435px;
		}
		
		#modelContainer{
			margin-top: -285px;
			height: 435px;
			z-index: -2;
		}
		/*
		#museumContainer{
			display: none;
		}
		*/
		
		.cameraBtns{
			border-color:black;
			border-style:solid;
			border-width:0px;
			margin-top:10px;
			padding: 5px;
		}
		
		.cameraBtns > p{
			font-size:15px;
			color:white;
			padding-left:4px;
		}
		
		.otherBtns > p{
			color:white;
		}
		
		p.thicker{
			font-weight: 900;
		}
		
		.btn-responsive{
			padding:4px6px;
			font-size: 80%;
			line-height:1.2;
			border-radius:3px;
			white-space:normal!importanr
		}
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
		
		
		
		.navbar-default{
			padding-top: 30px;
			background-image: url(../assets/images/banner_cropped.jpg);
			/*background-repeat: no-repeat;*/
			height: 82px;
			
			border-bottom: 2px;
			border-style:solid;
			border-color: #556B2F;
			/*width: 800px;
			display: block;*/
		}
		
		.logo{
			margin-top: -120px;
			margin-left: 0px;
		}
		.logo h1{
			font-family: 'Merriweather', serif;
			color: black;
			font-size: 26px;
			margin: 0;
			margin-top: 4px;
			margin-bottom: 0px;
			float: left;
			padding-top: 100px;
			padding-left: 0px;
			padding-right: 4px;
		}
		
		.navbar .nav {
			margin-right: 50px;
		}
		
		.navbar .nav > li  > a{
			margin-left: 4px;
			font-size: 14px;
		}
		
		#page_body{
			display:none;
		}
		
		#museumContainer{
			display: block;
		}
		
		
		#main_3d_image{
			background-image: url(../assets/images/model_bg-992.jpg);
			background-repeat: no-repeat;
			height: 562px;
		}
		#3dContentButtons{
			margin-bottom: -400px;
		}
 
		#helpText{
			border-style: solid;
			border-width: 2px;
			border-radius: 5px;
			
			position: absolute;
			z-index: 2;
			width: 500px;
			height: 80px;
			background-color: rgba(255, 255, 255, 0.8);
			/*margin: 0;*/
			top: 12%;
			left: 28%;
			margin: auto;
			padding: 6px;
		}
		
		#helpText p{
			font-size: 12px;
		}
		
		#nextModel{
			position: absolute;
			right: 10%;
			top: 35%;
			/*width: 100px;*/
			height: 100px;
			
			background-color: rgba(255, 255, 255, 0.8);
			border-style: solid;
			border-width: 2px;
			border-radius: 5px;
			/*padding: 0px;*/
			/*padding-bottom: 100px;*/
			font-family: 'Merriweather', serif;

			font-size: 60px;

		}
		
		#previousModel{
			position: absolute;
			left: 10%;
			top: 35%;
			/*width: 100px;*/
			height: 100px;
			
			background-color: rgba(255, 255, 255, 0.8);
			border-style: solid;
			border-width: 2px;
			border-radius: 5px;
			/*padding: 0px;*/
			/*padding-bottom: 100px;*/
			font-family: 'Merriweather', serif;

			font-size: 60px;
		}
		
		#museumInfoPannel{
			
			border-style: solid;
			border-width: 2px;
			border-radius: 5px;
			
			position: absolute;
			z-index: 2;
			width: 300px;
			height: 100px;
			background-color: rgba(255, 255, 255, 0.8);
			/*margin: 0;*/
			top: 60%;
			left: 35%;
			margin: auto;
			padding: 6px;
			padding-top: -20px;
		}
		
		#museumInfoPannel p{
			/*font-size: 12px;*/
			text-indent: -99999px;
		}
		
		#museumInfoPannel h2{
			font-size: 22px;
		}
		#museumInfoPannel hr{
			display: block;
			height: 1px;
			border: 0;
			border-top: 1px solid #ccc;
			margin: 1em 0;
			padding: 0; 
		}
		
		#examineButton{
			/*position: absolute;
			left: 80%;*/
			font-size: 16px;
			margin-left: 20px;
		}

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
		
		.navbar-default{
			padding-top: 30px;
			background-image: url(../assets/images/banner_cropped.jpg);
			/*background-repeat: no-repeat;*/
			height: 102px;
			
			border-bottom: 2px;
			border-style:solid;
			border-color: #556B2F;
			/*width: 800px;
			display: block;*/
		}
		
		.logo{
			margin-top: -120px;
			margin-left: 0px;
		}
		.logo h1{
			font-family: 'Merriweather', serif;
			color: black;
			font-size: 40px;
			margin: 0;
			margin-top: 4px;
			margin-bottom: 0px;
			float: left;
			padding-top: 100px;
			padding-left: 0px;
			padding-right: 4px;
		}
		
		.navbar .nav > li  > a{
			margin-left: 4px;
			font-size: 20px;
		}

		#myNavbar{
			margin-top: 20px;
		}
		
		#galleryHeader h1{
			color: white;
			font-size: 30px;
		}
		
		#galleryHeader{
			background-color:  #556B2F;
			border-style:  solid;
			/*border-bottom: 4px;*/
			border-top: 4px;
			border-left: 4px;
			border-right: 4px;
			border-color: gold;
		}
		
		#page_body{
			margin-top: 80px;
		}
		
		#main_3d_image{
			background-image: url(../assets/images/model_bg-1200.jpg);
			//background-repeat: no-repeat;
			height: 679px;
		}
		
		#modelContainer{
			height: 679px;
			margin-left: 15px;
			margin-top: 0px;
		}
		
		#3dModel{
			margin-top:0px;
			padding-top:0px;
		}
		
			.navbar-text > a{
			color: white;
			font-size: 12px;
			text-decoration: none;
		}
		
		.cameraBtns{
			border-color:black;
			border-style:solid;
			border-width:0px;
			margin-top:10px;
			padding: 5px;
		}
		
		.cameraBtns > p{
			font-size:15px;
			color:white;
			padding-left:4px;
		}
		
		.otherBtns > p{
			color:white;
		}
		
		p.thicker{
			font-weight: 900;
		}
		
		.btn-responsive{
			padding:4px6px;
			font-size: 100%;
			line-height:1.2;
			border-radius:3px;
			white-space:normal!importanr
		}
		
		#contentButtons{
			
			margin-right: 85%;
			padding-left: 40px;
			margin-bottom: -100%;
			position: relative;
			z-index: 10;
		}
		
		#buttonBar{
			height: 679px;
		}
		
		#infoContainer{
			height: 679px;
			width: 100%;
			margin-right:0px;
			margin-left: 0px;
			padding-left: 4px;
			background-color: rgba(255, 255, 255, 0.6);
			border-color: black;
			border-style: solid;
			/*border-radius: 4px;*/
			border-width: 1px;
		}
		
		#selectModelButtons{
			margin-top: 20px;
			padding-top: 10px;
			padding-bottom: 10px;
			background-color:  #556B2F;
			border-style: solid;
			border-left: 4px;
			border-right: 4px;
			border-color: gold;
		}
		
		#selectModelButtons img{
			size: 200%;
		}
		
		#selectSpearModelButtons{
			margin-top: 20px;
			padding-top: 10px;
			padding-bottom: 10px;
			background-color:  #556B2F;
			border-style: solid;
			border-left: 4px;
			border-right: 4px;
			border-color: gold;
			
		}
		
		#selectSwordModelButtons{
			margin-top: 20px;
			padding-top: 10px;
			padding-bottom: 10px;
			background-color:  #556B2F;
			border-style: solid;
			border-left: 4px;
			border-right: 4px;
			border-color: gold;
		}
		
		/*slideshow container*/
		#slideshowContainer{
			/*height: 600px;*/
		}
		
		/* slide */
		.mySlides{
			display: none;
		}
		
		/* the dots */
		.dot{
			cursor: pointer;
			height: 13px;
			width: 13px;
			margin: 0 2px;
			background-color: #bbb;
			border-radius: 50%;
			display: inline-block;
			transition: background-color 0.6s ease;
		}
		
		.active, .dot:hover{
			background-color: #717171;
		}
		
		#helpText{
			border-style: solid;
			border-width: 2px;
			border-radius: 5px;
			
			position: absolute;
			z-index: 2;
			width: 600px;
			height: 100px;
			background-color: rgba(255, 255, 255, 0.8);
			/*margin: 0;*/
			top: 12%;
			left: 33%;
			margin: auto;
			padding: 6px;
		}
		
		#helpText p{
			font-size: 14px;
		}
		
		
		#nextModel{
			position: absolute;
			right: 10%;
			top: 50%;
			/*width: 100px;*/
			height: 130px;
			
			background-color: rgba(255, 255, 255, 0.8);
			border-style: solid;
			border-width: 2px;
			border-radius: 5px;
			/*padding: 0px;*/
			/*padding-bottom: 100px;*/
			font-family: 'Merriweather', serif;

			font-size: 80px;

		}
		
		#previousModel{
			position: absolute;
			left: 10%;
			top: 50%;
			/*width: 100px;*/
			height: 130px;
			
			background-color: rgba(255, 255, 255, 0.8);
			border-style: solid;
			border-width: 2px;
			border-radius: 5px;
			/*padding: 0px;*/
			/*padding-bottom: 100px;*/
			font-family: 'Merriweather', serif;

			font-size: 80px;
		}
		
		#museumInfoPannel{
			
			border-style: solid;
			border-width: 2px;
			border-radius: 5px;
			
			position: absolute;
			z-index: 2;
			width: 800px;
			height: 200px;
			background-color: rgba(255, 255, 255, 0.8);
			/*margin: 0;*/
			top: 80%;
			left: 30%;
			margin: auto;
			padding: 6px;
		}
		
		#museumInfoPannel p{
			font-size: 14px;
			text-indent: 0px;

		}
		
		#museumInfoPannel h2{
			font-size: 30px;
		}
		
		#museumInfoPannel hr{
			display: block;
			height: 1px;
			border: 0;
			border-top: 1px solid #ccc;
			margin: 1em 0;
			padding: 0; 
		}
		
		#examineButton{
			/*position: absolute;
			left: 80%;*/
			font-size: 18px;
			margin-left: 20px;
		}