@charset "utf-8";
body {
  font-size: 18px;
  line-height:26px;
  font-family: 'Raleway', sans-serif;
  font-weight:500;
  color: #2c343b;
  background-image: url(images/background.jpg);
  background-repeat:repeat-x;
  margin:0 0 100px;
  position: relative;
  padding-bottom: 6rem;
  min-height: 100%;
  min-width: 100%;
  
}
html {
    position: relative;
    min-height: 100%;
}
table {
	border-color:#fff;
}
h1	{
	font-family: 'Raleway', sans-serif;
	font-size:45px;
	color: #DAA520;
	line-height:45px;
	font-weight: normal;
	-webkit-margin-after: 0.5em;
	-webkit-margin-before: 0.3em;
}
h2 {
	font-size: 42px;
  font-family: 'Raleway', sans-serif;
  color: #5F5258;
  	line-height:42px;
  font-weight:300;
  	-webkit-margin-after: 0.3em;
	-webkit-margin-before: 0.3em;
}
h3 {
	font-family: 'Raleway', sans-serif;
	font-size:35px;
	color: #4c4c4d;
	line-height:30px;
	font-weight: 800;
	-webkit-margin-after: 0.2em;
	-webkit-margin-before: 0.3em;
}
h4 {
	font-size: 30px;
 	font-family: 'Raleway', sans-serif;
  	color: #fff;
    font-weight:800;
  	-webkit-margin-after: 0.3em;
	-webkit-margin-before: 0.3em;
}
h5 {
	font-size: 24px;
 	font-family: 'Raleway', sans-serif;
  	font-weight:800;
  	-webkit-margin-after: 0.3em;
	-webkit-margin-before: 0.3em;
}
#inside {
	padding-top:20px;
	padding-bottom:10px;
   	width: 85%;
	margin: 0 auto;
}
#topright {
   	width: 400px;
	float:right;
	margin: 0 auto;
	text-align:right;
}
#body {
   padding-top:64px;
   padding-bottom:60px;   /* Height of the footer */
	margin: 0 auto;
}
#body_wrap {
	height: auto;
	width: auto;
	margin:auto;
	float:right; 
}
#topwrap {
	background-color: #ffffff;
	background-position: top;
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 8px -8px black;
	height: auto;
	overflow: hidden;
	padding-bottom:10px;
}
#topnumber {
	height: auto;
	padding-bottom:10px;
	float:right;
}
#contactwrap {
	background-color: #958268;
	height: auto;
	color:#FFF;
	padding-bottom:10px;
	width: 100%;
}
#wrap2 {
	background-color: #ebebeb;
	height: auto;
	width: 100%;
	padding-top:25px;
	padding-bottom: 25px;
}
#box {
	width: 25%;
	margin-left: 10px;
  color: #2c343b;
	padding:5px;
	text-align:center;
	float:right;
	border-color: #D1CAC0;
	border-width:15px;
	border-style:solid;
	
}
#box2 {
	width: auto;
	padding:0px;
	float:right;
	margin-left:10px;
}
#header {
   padding:10px;
   text-align:center;
   height:350px;
   width:80%; 
   margin:auto; 
}
a	{
	color: #958268;
	text-decoration:none;
}
a:hover{
	text-decoration: underline;
}
.bottom {
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	background-color: #656565;
	text-align: center;
	width:100%;
}
.bottom-content {
	padding:10px;
	color:#FFF;
	font-size:12px;
   text-align:center;
   height:auto;
   width:80%; 
   margin:auto;
   padding-left:20px;
   padding-right:20px; 
}
.bottom-box1 {
	width: 70%;
	margin:auto;
	padding:15px;
	text-align:center;
}
.bottom-box2 {
	height: 200px;
	width: 70%;
	margin:auto;
	padding:15px;
	float:left;
}
.bottom-box3 {
	height: 200px;
	width: 33%;
	margin:auto;
	padding:15px;
	float:right;
}
.bottom-font {
	font-size: 1.2rem;
  	font-family: 'Raleway', sans-serif;
  	color: #fff;
}
.head {
  font-size: 1.2rem;
  font-family: 'Raleway', sans-serif;
  color: #2c343b;
}
textarea {
border-radius: 5px;
border: 1px thin #79B7AC;
}
input[type=submit] {
    padding:0px 15px; 
    background:#79B7AC; 
    cursor:pointer;
    -webkit-border-radius: 5px;
	height:30px;

	} 
	.ul {
		line-height:45px;
	}
/* Remove margins and padding from the list, and add a black background color */
ul.primary-nav {
	float:left;
	list-style-type:none;
	padding-top:8px;
}

/* Float the list items side by side */
ul.primary-nav li {float: left;}

/* Style the links inside the list items */
ul.primary-nav li a {
    color: #333;
    text-align: center;
    padding: 14px 30px;
	font-weight:500;
    text-decoration: none;
    transition: 0.3s;
    font-size: 16px;
}

/* Change background color of links on hover */
ul.primary-nav li a:hover {color: #958268;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.primary-nav li.icon {display: none;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.primary-nav li:not(:first-child) {display: none;}
  ul.primary-nav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.primary-nav.responsive {position: relative;}
  ul.primary-nav.responsive li.icon {
    position:fixed;
    right: 0;
    top: 0;
  }
  ul.primary-nav.responsive li {
    float: none;
    display: inline;
  }
  ul.primary-nav.responsive li a {
    display: block;
    text-align: left;
  }
}
	
	/* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { }
		
		td { 
			/* Behave  like a "row" */
			position: relative;
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		Label the data
		*/
	}
	
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 320px; }
		}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
	}
  #scroller {
        position: relative;
    }
    #scroller .innerScrollArea {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    #scroller ul {
        padding: 0;
        margin: 0;
        position: relative;
    }
    #scroller li {
        padding: 0;
        margin: 0;
        list-style-type: none;
        position: absolute;
    }
.box{
  width:280px;
  height:auto;
  float:right;
  background-color:white; 
  border-radius:10px;
  margin-bottom: 15px;
  margin-left:20px;
}
.box1{
  background-color: #D6CEC5;
}
.shadow1, .shadow2, .shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
  position:relative;
}
.shadow1,.shadow2,.shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
/*****************************************************************dashed border
****************************************************************/
.shadow1 h3, .shadow2 h3, .shadow3 h3, .shadow4 h3, .shadow5 h3, .shadow6 h3, .shadow7 h3, .shadow8 h3{
  width:87%;
  height:100px;
  margin-left:6%;
  border:2px dashed #F7EEEE;
  border-radius:5px;
}
/****************************************************************
*styling shadows
****************************************************************/
.shadow1:before, .shadow1:after{
  position:absolute;
  content:"";
  bottom:12px;left:15px;top:80%;
  width:45%;
  background:#afa7a5;
  z-index:-1;
  -webkit-box-shadow: 0 20px 15px #afa7a5;
  -moz-box-shadow: 0 20px 15px #afa7a5;
  box-shadow: 0 20px 15px #afa7a5;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow1:after{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;left: auto;
}