::-webkit-scrollbar
{
  width: 4px;  /* for vertical scrollbars */
  height: 4px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.1);}
::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.2);}

@charset "utf-8";

h1 {font-size: 1.8vw; color: #999;}
h2 {font-size: 1.8vw; color: #999;}
h3 {font-size: 1.2vw; color: #999;}

a {text-decoration: none; ;}
a:link {text-decoration: none; }
a:visited {text-decoration: none;}
a:hover {text-decoration: none; }
a:active {text-decoration: none; }


HTML, BODY {
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	margin:0;
	padding:0;
	overflow:hidden;
	width: 100%;
	height: 100%;
	}
	
#wrapper {
	height: 100vh;
	overflow:hidden;
	
	}

#content {
	width: 100vw;
	height: 82vh;
	overflow: auto;
	position:relative;
	background-image:url(../image/bg-hero.png);
	background-repeat:no-repeat;
	background-size:cover;
	}
	

.menu {
	width: 100vw;
	height: 16vh;
	background-color:#E59A03;
	white-space:nowrap;
	}
	
.logo {
	width: 10vw;
	height: 15.5vh;
	display:inline-block;
	vertical-align: top;
	padding: .5vh 0 0 0;
	color:#FFF;
	}
	
.logo img {
	width: auto;
	height: 95%;
	}
	
.menu-contact {
	display: inline-block;	
	vertical-align: top;
	padding: 4vh 0 0 0; 
	color:#FFF;
	font-size:1.8vw;	
	text-decoration: none;
	}	
	
.menu-items {
	width: 65vw;
	height: 10vh;
	display:inline-block;
	vertical-align:top;
	text-align: right;
	padding: 6vh 1vw 0 0; 
	color:#FFF;
	font-size:1.5vw;	
	}

.menu-items a {
	color:#FFF;
	}
	
.menu-item:hover {
	color:#333;
	}
	
.footer {
	width: 100vw;
	height: 25px;
	background-color:#333;
	text-align:center;
	font-size: 1.1vw;
	color: #FFF;
	position:absolute;
	bottom:0;
	left:0;
	z-index: 1;
	}



/********* CSS for index.php page **********/
.index-top {
	width: 100vw;
	}
	
.index-box-1 {
	background-color: #E6FAE4; 
	display:inline-block;
	width:32.5vw;
	font-size: .8vw;
	margin: 1vh 0 0 .5vw;
	padding: 0 0 0 0;
	white-space:nowrap;
	overflow:hidden;
	cursor: pointer;
	}
	
.index-box-1-m {
	display:block;
	width:98vw;
	font-size: 2vw;
	margin: 1vh 0 0 .5vw;
	padding: 0 0 0 0;
	overflow:hidden;
	cursor: pointer;
	}
	
.index-box-heading-1 {
	background-color:#666;
	color: FFF;
	font-size:1.4vw;
	line-height:5vh;
	width:32.5vw;
	height:5vh;
	padding: 0 0 .4vh 0;
	text-align: center;
	}
	
.index-box-2 {
	background-color: #E6FAE4; 
	display:inline-block;
	width:32.5vw;
	font-size: .8vw;
	margin: 1vh 0 0 .5vw;
	padding: 0 0 0 0;
	white-space:nowrap;
	overflow:hidden;
	cursor: pointer;
	}
	
.index-box-2-m {
	display:block;
	width:98vw;
	font-size: 2vw;
	margin: 1vh 0 0 .5vw;
	padding: 0 0 0 0;
	overflow:hidden;
	cursor: pointer;
	}
	
.index-box-heading-2 {
	background-color:#666;
	color: FFF;
	font-size:1.4vw;
	line-height:5vh;
	width:32.5vw;
	height:5vh;
	padding: 0 0 .4vh 0;
	text-align: center;
	}
	
.index-box-3 {
	background-color: #E6FAE4; 
	display:inline-block;
	width:32.5vw;
	font-size: .8vw;
	margin: 1vh 0 0 .5vw;
	padding: 0 0 0 0;
	white-space:nowrap;
	overflow:hidden;	
	cursor: pointer;
	}
	
.index-box-3-m {
	display:block;
	width:98vw;
	font-size: 2vw;
	margin: 1vh 0 0 .5vw;
	padding: 0 0 0 0;
	overflow:hidden;	
	cursor: pointer;
	}
	
.index-box-heading-3 {
	background-color:#666;
	color: FFF;
	font-size:1.4vw;
	line-height:5vh;
	width:32.5vw;
	height:5vh;
	padding: 0 0 .4vh 0;
	text-align: center;
	}
	
.index-box-left {
	display: inline-block;
	width:10vw;
	height:22vh;
	padding: .5vh 0 0 0;
	}
	
.index-box-left img{
	width: 98%;
	height: auto;
	}


.index-box-right {
	display:inline-block;
	width:20vw;

	font-size: 1.2vw;
	margin: 0 0 0 1vw;
	vertical-align:top;
	white-space:pre-wrap;
	}

	
.index-box-click {
	background-color:#666;
	color: FFF;
	font-size:1.5vw;
	width:32.5vw;
	height:4vh;
	line-height:4vh;
	padding: 0 0 .4vh 0;
	text-align: center;
	}



#index-box-1:hover .index-box-heading-1 {
	border-bottom: 10px solid #F00;
    transition: 0.5s ease;
	}

#index-box-2:hover .index-box-heading-2 {
	border-bottom: 10px solid #393;
    transition: 0.5s ease;
	}

#index-box-3:hover .index-box-heading-3 {
	border-bottom: 10px solid #4A00B8;
    transition: 0.5s ease;
	}
	
#index-box-1:hover {
	vertical-align: top;
	background-color: #FFC; 
    transition: 0.5s ease;
	}

#index-box-2:hover {
	vertical-align: top;
	background-color: #FFC;
    transition: 0.5s ease;
	}

#index-box-3:hover {
	vertical-align: top;
	background-color: #FFC;
    transition: 0.5s ease;
	}




.index-eeds {
	width: 100vw;
	height: 45vh;
	margin: 1vh 0 0 0;
	white-space:nowrap;
	overflow:hidden;
	}

.index-eed {
	display:inline-block;
	width:32.5vw;
	height:45vw;
	margin: 0 0 0 .5vw;
	}
	
.index-eed img{
	width: 100%;
	height: auto;
	}
	

/******** CSS for information.php page **********/
.information {
	width: 65vw;
	height: 70vh;
	margin: 0 0 5% 0;
	padding: 0 0 0 10%;
	display: flex;
	justify-content: center;
	}
	
.information-content-left {
	width:30%;
	padding: 5% 0 0 0;
	margin: 0 5% 0 0;
	}
	
.information-content-right {
	width:70%;
	}
	

/******* CSS for contact.php page ***********/
.contact-heading {
	font-family: 'Roboto', sans-serif;
	text-align:center;
	margin:0 0 0 0;
	font-size:3vw;	
	}
	
.contact-toprow {
	white-space:nowrap;
	margin: 4vh 0 0 0;
	}

.contact-left {
	font-family: 'Roboto', sans-serif;
	font-size:1vw;
	display: inline-block;
	width:30vw;
	height: 55vh;
	vertical-align:top;
	margin:0 0 0 0;
	padding: 0 0 0 3%;
	min-width:300px;
	border-right:thin #666 solid;
	}

.contact-middle {
	font-family: 'Open Sans', sans-serif;
	font-size:4vw;
	display: inline-block;
	width:28vw;
	height: 55vh;
	text-align:left;
	margin:0 0 0 0;
	padding: 0 0 0 2vw;
	vertical-align:top;
	min-width:300px;
	border-right:thin #666 solid;
	}

.contact-right {
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	width: 32vw;
	height: 55vh;
	margin: 0 0 0 0;
	vertical-align:top;
	min-width:300px;
	}

.contact-image-container {
	background-size:contain;
	background-repeat:no-repeat;
	width: 95%;
	height: 45vh;
	}

.contact-locations {
	width: 90%;
	padding: 0 0 0 0;
	text-align:center;
	font-size: 1.5vw;
	white-space:pre-wrap;	
	}

.contact-address-container {
	font-family: 'Roboto', sans-serif;
	font-size:1.5vw;
	padding: 0 0 0 0;
	}
	
.contact-form-container {
	font-family: 'Roboto', sans-serif;	
	padding: 0 0 0 4vw;
	min-width: 300px;
	height: 55vh;
	font-size:1.2vw;
	}
	
.contact-forminput-textbox {
	color:#666666;
	font-size:1.2vw;
	width: 24vw;
	height:30px;
	border: 1px solid #000;
	}

.contact-forminput-textarea {
	color:#666666;
	font-size:1.2vw;
	width: 24vw;
	height:80px;
	border: 1px solid #000;
	}
	
.contact-kickstart-button {
	font-family: 'Open Sans', sans-serif;
	text-align:center;
	width:20vw;
	margin: 80 0 0 0;
	border-radius: 4px;
	background-color: #F90;
	color: white;
	font-size: 1.3vw;
    padding: 3;
	}
	
.contact-form-sendbutton {
	text-align:center;
	width:24vw;
	margin: 0 0 0 0;
	border-radius: 4px;
	background-color: #393;
	color: white;
	font-size: 1.5vw;
    padding: 3;
	}
	
.error {
	color: red;
	}


/******* CSS for price.php page ***************/
.price-heading {
	text-align:center;
	font-size: 2.5vw;
	color: #666;
	}
	
		
.price-box-left {
	display: inline-block;
	vertical-align:top;
	width:32vw;
	height:70vh;
	padding: 0 0 0 0;
	margin: 2vh 0 0 0;
	white-space:nowrap;
	overflow:hidden;
	}

.price-box-middle {
	display: inline-block;
	vertical-align:top;
	width:20vw;
	height:70vh;
	padding: 0 0 0 0;
	margin: 2vh 0 0 0;
	white-space:nowrap;
	overflow:hidden;
	}

.price-box-right {
	display: inline-block;
	vertical-align:top;
	width:44vw;
	height:70vh;
	padding: 0 0 0 0;
	margin: 2vh 0 0 0;
	white-space:nowrap;
	overflow:hidden;
	}

.price-box-form {
	background-color:#666;
	font-size: 2vmin;
	color: #FFF;	
	width: 26vw;
	height: 62vh;
	margin: 0 0 0 5vw;
	padding:0 0 0 0;
	}
	
.price-box-form input {
	width: 22vw;
	height: 4.6vh;
	color:#666;
	font-size: 2.1vmin;
	}
		
.price-box-form select {
	width: 22vw;
	height: 4.6vh;
	color:#666;
	font-size: 2.1vmin;
	}
		
.price-calc-head {
	width: 26vw;
	height:6vh;
	text-align:center;
	font-size: 2vw;
	color:#FFF;
	padding: 2vh 0 0 0;
	}
	
	
.price-form {
	width: 26vw;
	height: 60vh;
	font-size:1.2vw;
	color: #FFF;
	margin: 0 0 0 0;
	padding: 0 2vw 0 2vw;	
	}
	
.price-textbox {
	color:#666666;
	font-size:2vw;
	width: 100%;
	height:40px;
	border: 1px solid #000;
	padding:0 0 0 5;
	}

.price-dropdown {
	color:#666666;
	font-size:1.5vw;
	width: 100%;
	height:45px;
	border: 1px solid #000;
	}

#price-calc-button {
	background-color: #393;
	color: white;
	font-size: 3vmin;
    border: none;
    padding: 0 0 0 0;
	text-align: center;
	cursor:pointer;
	width: 22vw;
	height: 4vmin;	
	}
		
#price-box-quote {
	font-size: 2vmin;
	color: #666;	
	width: 44vw;
	height: 62vh;
	border: 1px solid #666;
	background-color:#F4F4F4;
	position:relative;
	}	
	
.price-quote-head {
	width: 100%;
	height:6vh;
	text-align:center;
	font-size: 2vw;
	background-color: #666;
	color:#FFF;
	padding: 1vh 0 0 0;
	}
	
.price-quote-info {
	color:#000;
	padding:.2vh .5vw 0 .5vw;
	font-size:1.2vw;
	white-space:nowrap;
	}
	
.price-n {
	width: 10vw;
	display: inline-block;
	margin: .2vh 0 0 0;
	}

.price-d {
	width: 20vw;
	display: inline-block;
	margin: .2vh 0 0 0;
	}

.price-t {
	width: 12vw;
	float: right;
	text-align: right;
	}

#price-total {
	text-align:right;
	font-weight:800;
	border-top:thin #666 dashed;
	padding: .1vh 0 0 0;	
	}
	
.price-quote-disclaimer {
	margin: 2vh 0 0 0;
	color:#333;
	font-family: 'Open Sans', sans-serif;
	text-align:justify;
	font-size:.8vw;
	white-space:pre-wrap;
	width: 100%;
	}
	
.price-quote-stra {
	margin: 2vh 0 0 0;
	color: blue;
	font-family: 'Open Sans', sans-serif;
	text-align:justify;
	font-size:.8vw;
	font-weight:bold;
	white-space:pre-wrap;
	width: 100%;
	}
	
.price-quote-upload-button {
	width: 98%;
	height: 5vh;
	font-family: 'Open Sans', sans-serif;
	background-color:#CCC;	
	color: white;
	font-size:1.5vw;
	text-align: center;
	cursor:hand;
	position: absolute;
  	bottom: 10px;
	}

	

<!-- EXAMPLE ----->
.example {
	width: 100vw;
	height:70vh;
	}

.example-left {
	display: inline-block;
	width: 50%;
	height: 80vh;
	text-align:center;
	}
	
.example-left img {	
	margin: 5vh 0 0 2vw;
	width: 90%;
	height: auto;
	border: 1px solid #666; 
	box-shadow: 5px 10px 8px #888888;
	}
	
.example-right {
	display: inline-block;
	vertical-align:top;
	width:44%;
	height: 80vh;
	vertical-align:top;
	}
	
.example-right-text {
	height:65vh;
	margin: 2vh 0 0 2vw;
	color: #666;
	overflow: auto;
	}
	
.example-right-text h1{
	}

.example-right-text p {
	font-size: 1.2vw;
	text-align: justify;
    text-justify: inter-word;
	}
	
.example-buttons {
	width: 100%;
	height:10%;
	text-align:center;
	}
	
.example-button {
	display: inline-block;
	margin: 0 10% 0 0;
	cursor:pointer;	
	cursor: hand;
	}

.birthday-sbs {
	display:inline-block;
	vertical-align: top;
	margin: 0 2% 0 0;
	}
	
.button-price {
	width: 100%;
	height: 12%;
	color: #FFF;
	font-size:1vw;
	font-weight:400;
	background-color: #FFB300;
	border: 4px solid #6D6D6D;
	padding: 4px;
	border-radius: 15px;
	cursor: hand;
	box-shadow: 5px 10px 8px #888888;
	}
	
.button-price:hover{
	font-size:1.1vw;
	}
	
<!-- MODAL ------->
.modal {
	display:none;
	z-index: 100;
	}

.modal-window {
	position:relative;
	width: 30%;
	height: auto;
  	background: #FFF;
  	margin: 10% auto;
  	padding: 10px;
  	border: 5px solid #F00;	
	border-radius:5px;
	text-align:center;
	z-index: 200;
	}

.modal-close {
	width:100%;
	color: #000;
	background:#FFF;
	text-align: right;
	font-size: 28px;
	font-weight: bold;	
	}
	
.modal-message {
 	color: #666;
	font-size: 1vw;
	}

.modal-close:hover,
.modal-close:focus {
    color: #999;
    cursor: pointer;
	}


.google-badge {
	width: 140px;
	height:50px;
	position: absolute;
	bottom: 30px;
	right: 20px;
	border: 2px solid #666;
	background-color:#FFF;
	border-radius: 4px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26)!important;
	border-top: 4px solid #0C3;
	z-index: 150;
	}
	
.google-rating {
	font-family: Helvetica Neue,Helvetica,Arial,sans-serif!important;
	font-size:16px;
	font-weight:600;
	}