@charset "UTF-8";
/* CSS Document */
@media only screen and (max-width: 600px) {
	body{
		margin: 0;
		padding: 0;
	}

	a, a:linked{
		color: inherit;
	}

	#header{
		width: 100%;
		height: 100px;
		position: fixed;
		background-color: #873031;
		top: 0;
		z-index: 9;
		color: #FFFFFF;
	}

	#menu{
		width: 100%;
		height: 25px;
		background-color: #1F85B4;
		position: absolute;
		bottom: 0;
		color: #FFFFFF;
		text-decoration: none;
	}

	.menuNav{
		width: 0%;
		position: fixed;
		margin-top: 25px;
		padding-top: 5px;
		height: 100%;
		line-height: 30px;
		font-size: 20px;
		color: #FFFFFF;
		overflow-x: hidden;
		background-color: #1F85B4;
		transition: 0.5s;
		left: 0;
		z-index: 30;
		border-top: #873031 1px solid;
	}

	.menuNav a{
		font-size: 18px;
		color: white;
		text-align: left;
		padding: 12px 12px;
		text-decoration: none;
		font-weight: bold;
		width: 100%;
		float: left;
		border-bottom: #873031 1px solid;
	}
	
	#devices{
		visibility: visible;
		position: absolute;
		right: 3px;
		float: right;
	}
	
	.section{
		width: 100%;
		height: auto;
		padding: 10px 0px 10px 0px;
		position: relative;
	}

	.frame{
		width: 99%;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}

	#wrapper{
		width: 100%;
		margin-top: 101px;
		overflow-y: scroll;
		overflow-x: hidden;
		height: auto;
		min-height: 100%;
		position: relative;
	}

	.slide{
		width: 100%;
		height: auto;
	}

	.slide img{
		width: 100%;
		height: auto;
		object-fit: contain;
		overflow: hidden;
	}

	ul li{
		list-style-type: circle;
	}

	.footer{
		width: 100%;
		background-color: #FFFFFF;
		bottom:0;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		font-size: 15px;
		position: relative;
		overflow-y: hidden;
		border-top: #4A2E09 2px solid;
	}
	/*** Headings ***/
	.title{
		font-size: 20px;
	}
	
	h1{
		font-size: 35px;
	}

	h2{
		font-size: 25px;
	}

	h3{
		font-size: 15px;
	}

	h4{
		font-size: 10px;
	}

	h5{
		font-size: 5px;
	}

	/*** division **/
	.coln10{
		width: 10%;
		text-align: justify;
	}

	.coln20{
		width: 20%;
		height: inherit;
		text-align: justify;
	}

	.coln30{
		width: 100%;
		text-align: justify;
		position: relative;
		object-position: center
	}

	.coln40{
		width: 40%;
		text-align: justify;
	}

	.coln50{
		width: 50%;
		text-align: justify;
	}

	.coln60{
		width: 60%;
		text-align: justify;
	}

	.coln70{
		width: 100%;
		text-align: justify;
	}

	.coln80{
		width: 80%;
		text-align: justify;
	}

	.coln90{
		width: 90%;
		text-align: justify;
	}

	/**** lines ***/
	.ln12{
		height: 20px;
	}
	.ln50{
		height: 50px;
	}

	.ln100{
		height: 100px;
	}

	.ln150{
		height: 150px;
	}

	.ln200{
		height: 200px;
	}

	.ln250{
		height: 250px;
	}

	.ln300{
		height: 300px;
	}
	.ln400{
		height: 400px;
	}

	/*** Position **/
	.right{
		float: right;
	}

	.left{
		float: left;
	}

	.ins{
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}

	.align{
		margin-left: auto;
		margin-right: auto;
	}

	/*** Images position ***/
	.coln10 img{
		width: 100%;
		height: inherit;
	}
	.coln20 img{
		width: 100%;
		height: inherit;
	}

	.coln30 img{
		width: 60%;
		margin-left: auto;
		margin-right: auto;
	}

	/*** Backgroun ***/
	.black-bg{
		background-color: #000000;
		height: inherit;
	}

	.brown-bg{
		background-color: #B67374;
		height: inherit;
	}

	.blue-bg{
		background-color: #76D0DE;
		height: inherit;
	}

	.purple-bg{
		background-color:peachpuff;
		height: inherit;
	}

	.black-bg{
		background-color: #000000;
		color: #FFFFFF;
	}
	
	/*** Image Shape **/
	.circle{
		border-radius: 50%;
	}

	/*** table ***/
	.tab60{
		width: 80%;
	}


	/*** Buttons ***/
	.btn {
		background-color:#1954E1; /* Green */
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		cursor: pointer;
	}

	/*** Input forarts ***/
	input[type=text], select {
		width: 80%;
		padding: 12px 20px;
		margin: 8px 0;
		box-sizing: border-box;
		background: white;
	}
}