﻿/*=============================================================
    Authour URL: www.designbootstrap.com
    
    http://www.designbootstrap.com/

    License: MIT

    http://opensource.org/licenses/MIT

    100% Free To use For Personal And Commercial Use.

    IN EXCHANGE JUST TELL PEOPLE ABOUT THIS WEBSITE
   
========================================================  */

/*==============================
GENERAL STYLES
==============================*/

@import url(http://fonts.googleapis.com/css?family=Anton|Maven+Pro:500,700);

body {
    font-family:'cashew_apple_aleregular'; 'Maven Pro', sans-serif;
    line-height: 25px;
	font-size:27px;
}

.pad-bottom {
    padding-bottom: /* 60 */20px;
}

section {
    padding-bottom: 120px;
    padding-top: 100px;
}

.btn {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}
/* scroll with mouse button!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.set-bk-clr {
   /* background-color: #FF2276; */
}

.clr-set {
    color: #FF2276;
}

.f-big {
    font-size: 40px;
    font-weight: 900;
}

.set-bk-clr:hover {
   /*  background-color: rgba(107, 1, 41, 0.67); */
}
/*==============================
NAVBAR STYLES
==============================*/
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
    color: #fdfae9;
    font-size: 24px;
    text-transform: uppercase;
}
.navbar-brand {
padding:0px;

}
    .navbar-brand img {
        height:50px;
    }
.navbar-default .navbar-toggle {
    border-color: #fdfae9;
}

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fdfae9;
    }

    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
        background-color: rgba(0, 0, 0, 0);
    }

.navbar-default .navbar-nav > li > a {
    color: #fdfae9;
    font-weight: 900;
}

    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        color: #000;
        text-decoration: none;
    }

.navbar-default {
    /*background-color: #099999; navbar hattere!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
	background-image: url(../img/bg_navmob.png);
    border-color: transparent;
	
}

@media (max-width: 767px) {
		.navbar-default {
    background-image: url(../img/bg_navmob.png);
    border-color: transparent;
	
}
	}
/* ADDED PADDING IN NAVBAR */
.navbar {
    padding: 15px;
    -webkit-transition: background .8s ease-out,padding .8s ease-out;
    -moz-transition: background .8s ease-out,padding .8s ease-out;
    transition: background .8s ease-out,padding .8s ease-out;
}
/* CLASS FOR REMOVING PADDING IN NAVBAR*/
.navbar-pad-original {
    padding: 0px;
	
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #000;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}


/* =============================================================
  HEADER SECTION STYLES
 ============================================================ */

#header {
    /* background: url(../img/home.png) no-repeat center center; */
	background-color: #099999; 
    padding: 0;
    -webkit-background-size: cover;
    background-size: cover;
    -moz-background-size: cover;
    /* background-attachment: fixed; */
    color: #fdfae9;
}

    #header .overlay {
		background-image: url(../img/bg.png); 
		background-color: #099999;
        /* background-color: rgba(3, 3, 3, 0.8);  */
        min-height: 700px;
    }
	
	#box{
		width:70%;
		height: auto;
		background-color:#fdfae9;
		margin:140px auto;
		padding:20px 40px 0px 40px;
		text-align:center;		
		-webkit-border-radius:40px;
		-moz-border-radius: 40px;
		border-radius: 40px;
		-moz-box-shadow: 3px 3px 9px #333;
		-webkit-box-shadow: 3px 3px 9px #333;
		box-shadow: 3px 3px 9px #333;
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');
	}
	@media (max-width: 767px) {
		#box {
		width:100%;
		}
	}
	
	#cloudes{
		margin-top:-75px;
		height:67px;
		background-repeat:no repeat;
		background-image: url(../img/1.png);
		background-size: 100% 100%;
	}
	
	
	#fig1{
		margin-top:-40px;
		margin-left:20%;
	}
	
	@media (max-width: 767px) {
		#cloudes		{
		width:0;
		height:0;
		}
		
		#fig1{
		width:200px;
		height:auto;
		margin-top:-40px;
		margin-left:-20px;
	}
		
		
	}
	
	#fig2{
		margin-top:-300px;
		margin-left:-740px;
	}


    #box h1 {
         /*line-height: 60px;
        font-size: 45px;
        font-weight: 900; 
       padding-top:  180 120px ;*/
        padding-bottom: 10px;
        color: #86e3e3;
    }
	
	#box h3{
        line-height: 30px;
        font-size: 42px;       
		color: #99cccc;
		color:#669999;
		padding-bottom: 10px;
        /* text-transform: uppercase; */
    }


    #box h4 {
        line-height: 30px;
        font-size: 34px;
		color: #99cccc;
        /* text-transform: uppercase; */
    }
	

/* =============================================================
 PORTFOLIO SECTION STYLES
 ============================================================ */

/* FOR CHANGING COLOR OF ACTIVE CATEGORY */
.caegories a {
	color: #fdfae9;
	/* background-color: #4d9da0; */
	-webkit-border-radius: 4px; 
            border-radius: 4px;}
.caegories a.active {
	color: #000;
	/* background-color: #fdfae9; */
	-webkit-border-radius: 4px; 
            border-radius: 4px;
        /* background-color: #96e0ed;
		border: 2px solid #FF2276; */
}
/* FOR TRANSITION BEAUTIFULLY */
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}


#works{background-image: url(../img/bg.png);
	background-color:#4bbfc3;
	margin:auto;
	} 

#works .work-wrapper{
    border: 4px solid #fdfae9;
    padding: 1px;
    margin: 10px;
	max-width:110px;	
} 
s
	#works img {
		filter:alpha(opacity=80); 
		-moz-opacity:0.8; 
		opacity: 0.8;
		
}

    #works img:hover {
        filter:alpha(opacity=100); 
		-moz-opacity:1; 
		opacity: 1;
    }
	
	#works h2{
		color:#fdfae9;}
	
	.btn {
		/* font-family: 'Maven Pro', sans-serif; */
		font-size:28px;
	}
	
/* =============================================================
  TESTIMONIAL SECTION STYLES
 ============================================================ */
/* #testimonial {
    background: url(../img/testimonial.jpg) no-repeat center center;
    padding: 0;
    -webkit-background-size: cover;
    background-size: cover;
    -moz-background-size: cover;
    background-attachment: fixed;
}

    #testimonial .overlay {
        background-color: rgba(0,0,0,0.7);
        padding-top: 90px;
        min-height: 300px;
        color: #fdfae9;
        padding-top: 100px;
        padding-bottom: 100px;
    } */
	
	
/* =============================================================
  aboutme SECTION STYLES
 ============================================================ */
#aboutme {
	background-image: url(../img/bg.png);
    background-color: #0a6977;/* rgba(237, 237, 237, 1) */;
	
}

  /*.media img {
   margin-right: 40px; 
    max-height: 150px;
    margin-bottom: 20px;
    border: 2px solid #FF2276;
	float:left;
}*/

   /*  .media img:hover {
        opacity: 0.6;
    } */
	
	#box2{
		width:70%;
		height: auto;
		background-color:#fdfae9;
		margin:50px auto;
		padding:20px;
		text-align:center;		
		-webkit-border-radius:40px;
		-moz-border-radius: 40px;
		border-radius: 40px;
		min-height:300px;
		-moz-box-shadow: 3px 3px 9px #333;
		-webkit-box-shadow: 3px 3px 9px #333;
		box-shadow: 3px 3px 9px #333;
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');
		
	}
	
	
	#box2 p{
/* 		font-family:'Maven Pro', sans-serif;
 */		margin:41px 25px 40px 25px;
		font-size:28px;
		text-align:left;
		color:#0a6977;
	}
	
	#me img{
		float:left;
		border: 1px dashed #000;
		padding:2px;
		max-height: 150px;
		margin-bottom: 40px;
		margin:20px;
	}
	
	#about img{
		float:left;
		margin-left:-100px;
		border: none;
	}
	
	#fig3 img{
		float:right;
		margin-top:-270px;
		margin-right:-60px;
		border: none;
	}
	
	#fig4 img{
		float:right;
		margin-top:-80px;
		margin-right:-80px;
		border: none;
	}
	@media (max-width: 767px) {
		#box2 {
		width:100%;
		}
		#fig3 img{
		margin:0;
		width:0;
		height:0;
		}
		#fig4 img{		
		margin:0;
		width:0;
		height:0;
		}
	}
	
/*================================
    felting STYLES
==================================*/
#felting {
	font-size:28px;
	color:#000;
    background-image: url(../img/bg.png); 
    background-color:#0eb0b0/* e4c96a */;
}

    /* #felting h4 {
        padding:0;
		text-align:left;
		font-size:30px;
    }
	
    #felting h6 {
		color:#000;
		font-size:20px;
        width:40px;
		float:right;
		background-color:#fdfae9;
		font-weight:580;
		border:2px #fdfae9;
		-webkit-border-radius:5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		line-height:0.8;
    }
	
	#felting h5 {
        text-align:left;
		font-size:28px;
		width:100%;
		line-height:0.7;
    }
	
	#felting  img{
	padding:3px;
	outline:1px  dashed #000;
	} 

	.col-md-3{
	height:300px;
 	}*/
	
	.content-item {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* height: 260px; */
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  max-width: 260px;
  padding:5px;
  outline:1px  dashed #000;
  
  
}
.content-item img {
  /* display: block; */
  max-width: 100%;
  height: auto;
}



	
.content-item .overlay {
  border-bottom: 70px solid #fdfae9;
  border-left: 70px solid transparent;
  bottom: 0;
  height: 0;
  opacity: .80;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  width: 0;
}
.content-item:hover .overlay {
  border-bottom: 800px solid #fdfae9;
  border-left: 800px solid transparent;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item .corner-overlay-content {
font-size:21px;
font-weight:bold;
 line-height: 17px;
  bottom: 1px;
  color: #000;
  position: absolute;
  right: 1px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item:hover .corner-overlay-content {
  opacity: 0;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item .overlay-content {
  bottom: 0;
  color: #333;
  left: 0;
  opacity: 0;
  padding: 22px;
  position: absolute;
  right: 0;
  top: 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.content-item .overlay-content h2 {
 font-size:26px;
  	font-weight:bold;
	text-align:left;
}
.content-item .overlay-content p {
 font-size:24px;
  	font-weight:bold;
	text-align:left;
}
.content-item:hover .overlay-content {
  opacity: 1;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}


	/* =============================================================
  CONTACT SECTION STYLES
 ============================================================ */
#contact {
		background-image: url(../img/bg.png);
        background-color: #66cccc;
	  /* background: url(../img/clients.jpg) no-repeat center center ; 
    -webkit-background-size: cover;
    background-size: cover;
    -moz-background-size: cover;
    background-attachment: fixed; */
} 
	

    #contact .overlay {
		background-image: url(../img/bg.png);
        background-color: #66cccc; /* rgba(0,0,0,0.9) */
/* 		padding-top: 90px;
 */     min-height: 300px;
        color: #099999;
        /* padding-top: 100px; */
        padding-bottom: 160px;
		margin-top:-30px;		
    }
	
	#contact h4 {
		font-size:28px;
		color:#000;
    }
	
	#contact a,
	#contact a:hover{
		text-decoration: underlined;
	}
	
	#fig5{
	margin-top:40px;
	}
	#fig6{
	margin-bottom:-110px; 
	margin-left:70px;
	}
	@media (max-width: 767px) {
		
		#fig5 img{
		width:300px;
		}
	}
	
/* =============================================================
  FOOTER SECTION STYLES
 ============================================================ */
footer {
    padding: 20px;
    font-size: 15px;
    text-align: center;
    font-weight: 900;
	background-color:#000;
    /* background-color: rgba(237, 237, 237, 1); */
	font-family:'Maven Pro', sans-serif;
	color: #fdfae9;
	 /* background-image: url(../img/bg.png);  */
}

    footer a, footer a:hover {
        color: #000;
        text-decoration: none;
    }
	
	.bottom{		
		background-repeat:repeat-x;
		height:23px;
		width:100%;
	}
	#bottom1.bottom {
	background-image: url(../img/top1.png);
	}
	#bottom2.bottom{
	background-image: url(../img/top2.png);
	}
	 #bottom3.bottom{
	background-image: url(../img/top3.png);
	}
	#bottom3_.bottom{
	background-image: url(../img/top44.png);
	}
	 #bottom4.bottom{
	background-image: url(../img/top4.png);
	}
	#bottom5.bottom{
	background-image: url(../img/top5.png);
	} 
		 


	
	

