@charset "utf-8";
/* CSS Document */

body{background-image: url(images/background.jpg); background-repeat:no-repeat;background-size: cover;
  background-position: center;margin-bottom:-8px;overflow:hidden;}
  
  
#loading_gif {
    position: fixed;
    margin-left: 45%;
    margin-top: 47vh;
    width:200px;
    height:200px;
}

#loader {
  opacity:0;
  z-index: 1;
  width: 102%;
  height: 100vh;
  margin-top:-8px;
  margin-left:-9px;
  -webkit-animation: anmz 5s;
  animation: anmz 5s;
  background: rgba(0, 0, 0, 1);
 overflow:hidden;
}

@-webkit-keyframes anmz {
  0% { opacity:1; } 25% { opacity:1; } 100% { opacity:0; }
}

@keyframes anmz {
  0% { opacity:1; } 25% { opacity:1; } 100% { opacity:0; }
}


.shadowboard, .clipboard {
    
	background-image: url(images/background.jpg);
  
    
}

.clipboard, .shadowboard {
    filter: blur(45px);
    -webkit-filter: blur(45px);
    -moz-filter: blur(45px);
    -o-filter: blur(45px);
    -ms-filter: blur(45px);
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background-size: cover;
    
    
}

.clipboard{animation: anmzz 5s;}

@keyframes anmzz {
  0% { opacity:0; } 100% { opacity:.25; }
}




.heading{
    color: #193708;
    background-color: transparent;
    font-family: 'Sniglet', cursive;;
    line-height: 5px;
    text-align: right;
    font-weight: normal;
    font-size: 32px;
}

p{font-family: 'Sniglet', cursive;}



.main_container{
	width:90%;
	height:98vh;
	border: 0px solid #000;
	float:left;	
	}
	
	/*MENU:STARTS*/
.main_menu{
	width:13%;
	height: 40%;
	float:left;
	border:0px solid #000;
	margin-top: 12%;
    margin-left: 3%;
    position: relative;
    z-index: 1;
	}

/**/

/* Style the tab */
.btn {
  border: none;
  outline: none;
  width:135px;
  height:46px;
  cursor: pointer;
  font-size: 18px;
  background-color: transparent;
}

.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.active {
	margin-left: 55px;
	pointer-events: none;
}

/* Create an active/current "tab button" class */
.tab button.active {
  margin-left: 55px;
  pointer-events: none;
}

/* Style the tab content */
.tabcontent {
    float: left;
    /* padding: 0px 12px; */
    border: 0px solid #ccc;
    width: 92%;
    border-left: none;
    height: 98%;
}

/**/

.home {
	background-image: url(images/tag-home.png);
	background-size:100% 100%;	
	}
.home:hover{
	background-image:url(images/tag-home-roll.png);
	background-size:100% 100%;	
	}

.about {
	background-image: url(images/tag-about.png);
	background-size:100% 100%;	
}
.about:hover{
	background-image: url(images/tag-about-roll.png);
	background-size:100% 100%;	
	}

.books {
	background-image: url(images/tag-books.png);
	background-size:100% 100%;	
}
.books:hover{
	background-image: url(images/tag-books-roll.png);
	background-size:100% 100%;	
	}

.crafts {
	background-image: url(images/tag-crafts.png);
	background-size:100% 100%;	
}
.crafts:hover{
	background-image: url(images/tag-crafts-roll.png);
	background-size:100% 100%;	
	}
	
.blogs {
	background-image: url(images/tag-blogs.png);
	background-size:100% 100%;	
}
.blogs:hover{
	background-image: url(images/tag-blogs-roll.png);
	background-size:100% 100%;	
	}
	
.contact {
	background-image: url(images/tag-contact.png);
	background-size:100% 100%;	
}
.contact:hover{
	background-image: url(images/tag-contact-roll.png);
	background-size:100% 100%;	
	}
	
	
	/*MENU:ENDS*/
	
	
.tab_container{
	width: 86%;
    height: 90%;
    float: left;
    border: 0px solid #000;
    margin-left: -4%;
    margin-top: 5%;
	}
	
.text_area{float:left;
	width: 42%;
    height: 500px;
    margin-left: -10%;
    text-align: justify;
    position:relative;
    z-index:1;
    font-family: 'Sniglet', cursive;
	}
	
.chairtable{
	width: 53%;
    height: 57%;
    float: left;
    border: 0px solid #000;
    margin-left: 7%;
    margin-top: 29%;
    background-image: url(images/tablechair.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
		}
	

	
.mug{
	width: 81%;
    height: 89.5%;
    float: left;
    margin-left: 24%;
    margin-top: 3%;
    background-image: url(images/mug&shadow.png);
    background-size: 100% 100%;	
	visibility:visible;
	position:relative;
	animation-name:muganm;
	animation-duration:1.2s;
	}
@keyframes muganm{
	0%{visibility:hidden;}
	25%{visibility:hidden;}
	50%{visibility:hidden;}
	75%{visibility:hidden;}
	100%{visibility:visible;}
	}
	
.blurmug{
	width: 18%;
    height: 30%;
    float: left;
    margin-left: 24%;
    margin-top: -60%;
	background-image:url(images/blurmug.png);
	background-size:100% 100%;
	visibility:hidden;
	position:relative;
	animation-name: blurmuganm;	
	animation-duration: 1s;
	}
@keyframes blurmuganm{
	0% {top:-700px;visibility: visible;}
	50% {top:-700px;visibility: visible;}
	100%{top:0px;}	
	}
	
.girl{
    float: left;
    width: 67%;
    height: 122%;
    border: 0px solid #000;
    background-image: url(images/girl.png);
    background-size: 100% 100%;
    margin-top: -12%;
    margin-left: 25%;
	position:relative;
	animation-name:girlanm;
	animation-duration:1.2s;
	}
@keyframes girlanm{
	0%{visibility:hidden;}
	25%{visibility:hidden;}
	50%{visibility:hidden;}
	75%{visibility:hidden;}
	100%{visibility:visible;}
	}	
	
.blurgirl{
	float: left;
    height: 122%;
    width: 38%;
    margin-left: 26%;
    margin-top: -80%;
    background-image: url(images/blurgirl.png);
    background-size: 100% 100%;
	visibility:hidden;
	position:relative;
	animation-name: blurgirlanm;	
	animation-duration: .92s;
	}
@keyframes blurgirlanm{
	0% {top:-1000px;visibility: visible;}
	50% {top:-1000px;visibility: visible;}
	100%{top:0px;}	
	}
	
	
	
	
.bookswithshadow{
	width: 105%;
    height: 120%;
    float: left;
    margin-left: 17%;
    margin-top: -10.5%;
    background-image: url(images/books.png);
    background-size: 100% 100%;
    visibility: visible;
    position: relative;
    animation-name: bookswithshadowanm;
    animation-duration: 1.2s;
	}
@keyframes bookswithshadowanm{
	0%{visibility:hidden;}
	25%{visibility:hidden;}
	50%{visibility:hidden;}
	75%{visibility:hidden;}
	100%{visibility:visible;}
	}
	
.blurbooks{
	width: 31%;
    height: 45%;
    float: left;
    margin-left: 17%;
    margin-top: -76%;
    background-image: url(images/blurbooks.png);
    background-size: 100% 100%;
    visibility: hidden;
    position: relative;
    animation-name: blurbooksanm;
    animation-duration: 1s;
	}
	
@keyframes blurbooksanm{
	0% {top:-700px;visibility: visible;}
	50% {top:-700px;visibility: visible;}
	100%{top:0px;}	
	}
	
	
	
.craftswithshadow{
	width: 87%;
    height: 113%;
    float: left;
    margin-left: 11%;
    margin-top: -7%;
    background-image: url(images/craftswithshadow.png);
    background-size: 100% 100%;
    visibility: visible;
    position: relative;
    animation-name: craftswithshadowanm;
    animation-duration: 1.2s;
	}
@keyframes craftswithshadowanm{
	0%{visibility:hidden;}
	25%{visibility:hidden;}
	50%{visibility:hidden;}
	75%{visibility:hidden;}
	100%{visibility:visible;}
	}
	
.blurcrafts{
	width: 35%;
    height: 45%;
    float: left;
    margin-left: 11.5%;
    margin-top: -70%;
    background-image: url(images/blurcrafts.png);
    background-size: 100% 100%;
    visibility: hidden;
    position: relative;
    animation-name: blurcraftsanm;
    animation-duration: 1s;
	}
	
@keyframes blurcraftsanm{
	0% {top:-700px;visibility: visible;}
	50% {top:-700px;visibility: visible;}
	100%{top:0px;}	
	}
	
	
.blogwithshadow{
	width: 98%;
    height: 98%;
    float: left;
    margin-left: 13%;
    margin-top: 2%;
    background-image: url(images/blogwithshadow.png);
    background-size: 100% 100%;
    visibility: visible;
    position: relative;
    animation-name: blogwithshadowanm;
    animation-duration: 1.2s;
	}
@keyframes blogwithshadowanm{
	0%{visibility:hidden;}
	25%{visibility:hidden;}
	50%{visibility:hidden;}
	75%{visibility:hidden;}
	100%{visibility:visible;}
	}
	
.blurblog{
	width: 40%;
    height: 45%;
    float: left;
    margin-left: 10%;
    margin-top: -66%;
    background-image: url(images/blurblog.png);
    background-size: 100% 100%;
    visibility: hidden;
    position: relative;
    animation-name: blurbloganm;
    animation-duration: 1s;
	}
	
@keyframes blurbloganm{
	0% {top:-700px;visibility: visible;}
	50% {top:-700px;visibility: visible;}
	100%{top:0px;}	
	}
	
	
.contactwithshadow{
	width: 90%;
    height: 98%;
    float: left;
    margin-left: 14%;
    margin-top: 2%;
    background-image: url(images/contactwithshadow.png);
    background-size: 100% 100%;
    visibility: visible;
    position: relative;
    animation-name: contactwithshadowanm;
    animation-duration: 1.2s;
	}
@keyframes contactwithshadowanm{
	0%{visibility:hidden;}
	25%{visibility:hidden;}
	50%{visibility:hidden;}
	75%{visibility:hidden;}
	100%{visibility:visible;}
	}
	
.blurcontact{
	width: 34%;
    height: 45%;
    float: left;
    margin-left: 14%;
    margin-top: -64%;
    background-image: url(images/blurcontact.png);
    background-size: 100% 100%;
    visibility: hidden;
    position: relative;
    animation-name: blurcontactanm;
    animation-duration: 1s;
	}
	
@keyframes blurcontactanm{
	0% {top:-700px;visibility: visible;}
	50% {top:-700px;visibility: visible;}
	100%{top:0px;}	
	}
	
/*contact form css starts*/
.contact_text_area{
	float:left;
	width: 45%;
    height: 500px;
    margin-left: -24%;
    font-family:'Sniglet', cursive;
	}


#contact-area {
	width: 600px;
	margin-top: 15px;
	position: absolute;
    z-index: 1;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 358px;
	font-family: 'Sniglet', cursive;
	/*font-size: 1.4em;*/
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
	background: transparent;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}

#contact-area input.submit-button {
	width: 83px;
	float: right;
	margin-right: 19%;
}

label {
	float: left;
	text-align: left;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	/*font-size: 1.4em;*/
}

/*contact form css ends*/

.bottomMenu {
    display: none;
    margin: 0px auto;
    position: relative;
    top: 15px;
    width: 175px;
    height: 175px;
    border-top: 0px solid #000;
    z-index: 1;
    background-image: url(images/cb1-cover-thumb.jpg);
    background-size: 100% 100%;
}


	
	@media only screen and (width: 1280px), screen and (height:768px) {
	
	html, body {background-image: url(images/bg-1280-800.jpg); background-repeat:no-repeat; background-size:100% 100vh; background:cover; }
	.contact_text_area {
    margin-left: -18%;
}
	}
	
	@media only screen and (max-width: 1024px), screen and (height:768px) {
	html, body {background-image: url(images/bg-1024-768.jpg); background-repeat:no-repeat; background-size:100% 100vh; background:cover; }
	.chairtable {margin-left: 20%;
    margin-top: 22%;}
	.text_area {margin-left: -16%;}
	.tab_container {
    width: 92%;}
	.contact_text_area {
    
    width: 36%;
	}
	}
@media only screen and (width: 1280px){/*#contact-area {
    
	margin-left: -5%;}*/

	}

@media only screen and (max-width: 1280px) {
 .main_menu{margin-top: 20%;margin-left: 4%;}
 .tab_container{height: 73%;margin-top: 21%;}
 .text_area {margin-top: -15%;}
 .contact_text_area {margin-top: -15%;}
/* #contact-area {
    width: 457px;
	margin-left: -5%;}*/
	
	
}

@media only screen and (width: 1920px) {
    .main_menu{margin-left: 4.5%;}
    .contact_text_area {
    margin-left: -9%;
}
	.bottomMenu {
    top: 190px;
}

}

@media only screen and (max-width: 1024px) {
 .tab_container {
    height: 73%;
    margin-top: 17%;
 }



 .main_menu {
    margin-top: 12%;
    margin-left: -1%;
}
}


@media only screen and (max-width: 720px) {
    html, body {background-image: url(images/bg-320-480.jpg); background-repeat:no-repeat; background-size:100% 100vh; background:cover;overflow:visible;}
	#loader {
    
    width: 105%;}
    
    .chairtable{display:none;}
    
    .main_container {
    width: 98%;
    height: 98vh;}
    
    .active {margin-left:0px;}
    
    .btn {width:55px;height: 24px;margin-left: -5px;}
    
    .main_menu{margin:0px auto;width:95%;height: 4%;margin-top:0px;margin-left:4%; }
    .text_area{margin-left: 4%;width: 122%;margin-top: 5%;}
	 .contact_text_area {margin-left: 7%;width: 121%;margin-top: 14%;}
    
    .home {background-image: url(images/mobhome.png);}
    .about {background-image: url(images/mobabout.png);}
    .books {background-image: url(images/mobbooks.png);}
    .crafts {background-image: url(images/mobcrafts.png);}
    .blogs {background-image: url(images/mobblogs.png);}
    .contact {background-image: url(images/mobcontacts.png);}
    
    #contact-area input, #contact-area textarea {width: 218px;}
    #contact-area input.submit-button {margin-right: 24%;}
	#contact-area {
    width: 306px;}
 
}




.scroll_area{height:250px; overflow:scroll; overflow-x:hidden; text-align:left;padding-right: 25px;}

.mask{width:100%;height:auto;-webkit-mask-image: -webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

/*.scroll_area:after{content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 90%);
    background-image: linear-gradient(to top, rgba(234, 225, 209, 0), rgba(255,245,232,.5), rgba(255,250,240,0)113%);
    -webkit-text-fill-color: transparent;
    -webkit-border-radius: 10px;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    width: 97%;
    height: 18em;
    bottom: 7px;
    }*/
    
.scroll_area::-webkit-scrollbar {
  width: 7px;
}
.scroll_area::-webkit-scrollbar-button:start{

	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 25px solid #835fab;}
.scroll_area::-webkit-scrollbar-button:end {
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 25px solid #835fab;
}
.scroll_area::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
  background:transparent;
}
.scroll_area::-webkit-scrollbar-thumb {
  background: #835fab; 
  border-radius: 10px;
}
.scroll_area::-webkit-scrollbar-thumb:hover {
  background: #8139d1; 
}