/*===========

1. Google Fonts
2. Common Css
3. Header Fixed Css
4. Navbar Css
5. Parrlax Banner 
6. Canvas Css
7. Full Width Bg
8. Socail Icons 
9. Testimonials
10. Pricing Table
11. Icon Color
12. Buttons
13. Contact Form
14. Screen
15. Footer

===========*/

/****** Google Fonts ********/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500,700,900');
body
{

    font-weight: 400;
  	color:#363636;
	line-height:27px;
	font-family: normal 16px/26px "Roboto", Arial, sans-serif;
	/*background: url(../images/bg-full.jpg) no-repeat;*/
	font-size:15px;
}
a
{
	color:#363636;
	text-decoration: none;
}
a:hover
{
	color:  rgba(241, 85, 45, 1);
	text-decoration:none;
}

h1, h2, h3, h4, h5, h6
{
	line-height:1 !important;
}
/******** Common Css ********/
.intro {
	padding: 150px 0 0;
	position: relative;
}

.overlay {
	position: relative;
}

.intro1.overlay:after ,
.intro2.overlay:after ,
.intro3.overlay:after ,
.intro4.overlay:after ,
.intro5.overlay:after ,
.intro6.overlay:after ,
.intro7.overlay:after {
	opacity: 0.65;
}

.intro8.overlay:after {
	opacity: 0.45;
}

.overlay:after {
	content: "";
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0.85;
}

.overlay .container {
	position: relative;
	z-index: 11;
}

.intro h2 {
	color: #fff;
	font-size: 47px;
	line-height: 55px;
	margin: -30px 0 20px;
	font-weight: 300;
}

.intro p {
	color: #fff;
	font-size: 20px;
	line-height: 32px;
	opacity: 0.7;
	margin: 0 0 50px;
}

/***************** COMMON CSS **********************/

h1, h2, h3, h4, h5, h6
{
	margin:0px 0px 18px 0px;
	color:#111;
}
.text-red
{
	color:#e62739;
}
.bg-none
{
	background:none;
}
.pt5
{
	padding:50px 0px;
}

section{
	padding:50px 0px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus
{
	background:#f1552d;
	border:1px solid #f1552d;
}
.page-link:focus, .page-link:hover
{
    color: #f1552d;
    text-decoration: none;
    background-color: #f1552d;
    border-color: #f1552d;
}
.box-shadow1
{
	-webkit-box-shadow: 0px 7px 30px 0px rgba(0,0,0,0.18);
	-moz-box-shadow: 0px 7px 30px 0px rgba(0,0,0,0.18);
	box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.18);
}
.box-shadow2
{
	-webkit-box-shadow: 0px 7px 30px 0px rgba(0,0,0,0.18);
	-moz-box-shadow: 0px 7px 30px 0px rgba(0,0,0,0.18);
	box-shadow: 0px 7px 30px 0px rgba(0,0,0,0.18);
}
.box-shadow3
{
	-webkit-box-shadow: 0px 24px 59px 0px rgba(51,58,69,0.15);
	-moz-box-shadow: 0px 24px 59px 0px rgba(51,58,69,0.15);
	box-shadow: 0px 24px 59px 0px rgba(51,58,69,0.15);
}
h1, h2, h3, h4, h5, h6
{
    margin: 0px 0px 18px 0px;
}
.btn-5
{
     background-color: #00bfff;
    border: 0;
    color: #fff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
	text-transform:uppercase;
	opacity: .7
}
.border-radius-none
{
	border-radius: 0px !important;
}
.btn-5:hover
{
	color:#fff;
	opacity: 1
}
.bg-clr
{
    background: #00bfff;
    border-radius: 50px;
    width: 75px;
    height: 75px;
    margin: 0 auto;
}

.thin
{
	letter-spacing:2px;
	font-weight:100;
}
.line-height27
{
    line-height: 27px;
}

.border-top
{
	border-top: 5px solid #FF0000;
	border-bottom:1px solid #e9ecef;
	border-left:1px solid #e9ecef;
	border-right:1px solid #e9ecef;
}
.bg-light-banner
{
	background-color:rgba(255, 255, 255, .7) !important;
	border-radius: 5px;
}
.border4
{
	border:4px solid rgba(255, 0, 51, 1);
}
.light-bg1
{
	background:rgba(255, 0, 51, .5);
}
.pt3
{
	padding-top: 150px;
}
.pt2
{
	padding-top: 100px;
}
.display-5
{
	font-size: 3rem;
}
.btn-light
{
    color: #fff;
    background-color: transparent;
    border-color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    font-weight: bold;
    font-size: 12px;
    padding: 8px 25px;
}

.icons-bg1
{
    background: #00bfff !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 50px;
    line-height: 115px;
    color: #fff;
}
/************** Header Fixed Css *************/
#header-fix.active
{
	background: #00bfff !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

/********************** Navbar Css ***********************/
.navbar-light .navbar-nav .nav-link
{
   color: #fff;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 10px 15px;
    margin-left: 10px;
}
.navbar-light .navbar-nav .nav-link:hover
{
  color: #fff;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 10px 15px;
    border-bottom: 1px solid;
    margin-left: 10px;
}
.navbar-light .navbar-nav .nav-link:focus
{
	  color: #fff;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 10px 15px;
    border-bottom: 1px solid;
    margin-left: 10px;
}

.navbar-light .navbar-nav  .nav-link.active{
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 10px 15px;
    border-bottom: 1px solid #fff;
    margin-left: 10px;
}
.navbar-light .navbar-toggler 
{
    color: rgba(0, 0, 0, 0.5);
    border-color: #fff;
    padding-bottom: 10px;
    padding-top: 5px;
}
.navbar-light .navbar-toggler-icon
{
    background-image: none !important;
    width: 30px;
    height: 2px;
    background: #fff;
    display: block;
    margin-top: 5px;
    padding: 10p;
}
/******************** Parrlax Banner *******************/
.inner-page-banner-area
{

	background-position:center center;
	background-size: cover;
	padding:250px 0px;
	color:#fff;
	
}
.inner-banner-area
{
	
	background-position:center center;
	background-size: cover;
	padding:190px 0px;
	color:#fff;
	    position: relative;
    z-index: 9;
}
li.breadcrumb-item a
{
	color:#fff;
}li.breadcrumb-item.active
{
	color:#e62739;
} 	
.breadcrumb-item+.breadcrumb-item::before
{
	color:#fff !important;
}

.md-color-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.gradient-pink-purple {
   background: #00bfff;
}
/******************** WELCOME *******************/
canvas {
  display: block;
  vertical-align: bottom;
}
/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background:  #00bfff;
  top:0;
  z-index: -1;
}

/***************** Full Width Bg*****************/

.background-image-maker {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-color: $bg-gray;
    z-index: -1;
	right:auto
}
.relative {
    position: relative;
}
.holder-image img {
    display: none;
}
.image-bg
{
    position: relative;
}

/********* Socail Icons *************/
.icon-circle .fa{
    font-size           : 25px;
    color               : #363636;
    margin              : 0 auto;
    height              : 40px;
    width               : 40px;
    border-radius       : 50%;
    border              : 0px solid #e84700;
    line-height         : 35px;
    cursor              : pointer;
    -webkit-transition  : all  ease-in-out 0.35s;
    -moz-transition     : all  ease-in-out 0.35s;
    -o-transition       : all  ease-in-out 0.35s;
    -ms-transition      : all  ease-in-out 0.35s;
    transition          : all  ease-in-out 0.20s,background-color ease-in-out 0.05s;
	text-align:center;
}

.icon-circle  .fa:hover{
    
    background-color        : #e84700;    
    color                   : #fff;
    border                  : 0px solid #e84711;
    -moz-box-shadow         : inset 0px 0px 0px 2px #ffffff;
    -o-box-shadow           : inset 0px 0px 0px 3px #ffffff;
    -ms-box-shadow          : inset 0px 0px 0px 3px #ffffff;
    -webkit-box-shadow      : inset 0px 0px 0px 3px #ffffff;
    box-shadow              : inset 0px 0px 0px 2px #ffffff;
    -ms-transform           : scale(1.2,1.2); 
    -webkit-transform       : scale(1.2,1.2);
    -moz-transform          : scale(1.2,1.2); 
    -o-transform            : scale(1.2,1.2); 
    transform               : scale(1.2,1.2);  
}

.icon-circle  i:before{
    margin-left         : 0px;
    font-size           : 18px;
}

@media (min-width:320px) and (max-width:768px) {


 .icon-circle .fa{
    font-size           : 15px;
    color               : #fff;
    margin              : 0 auto;
    height              : 40px;
    width               : 40px;
    border-radius       : 50%;
    border              : 2px solid #e84700;
    line-height         : 40px;
    cursor              : pointer;
    -webkit-transition  : all  ease-in-out 0.35s;
    -moz-transition     : all  ease-in-out 0.35s;
    -o-transition       : all  ease-in-out 0.35s;
    -ms-transition      : all  ease-in-out 0.35s;
    transition          : all  ease-in-out 0.20s,background-color ease-in-out 0.05s;
}

.icon-circle  .fa:hover{
    
    background-color        : #e84700;    
    color                   : #fff;
    border                  : 1px solid #e84711;
    -moz-box-shadow         : inset 0px 0px 0px 5px #ffffff;
    -o-box-shadow           : inset 0px 0px 0px 5px #ffffff;
    -ms-box-shadow          : inset 0px 0px 0px 5px #ffffff;
    -webkit-box-shadow      : inset 0px 0px 0px 5px #ffffff;
    box-shadow              : inset 0px 0px 0px 5px #ffffff;
    -ms-transform           : scale(1.2,1.2); 
    -webkit-transform       : scale(1.2,1.2);
    -moz-transform          : scale(1.2,1.2); 
    -o-transform            : scale(1.2,1.2); 
    transform               : scale(1.2,1.2);  
}

.icon-circle  i:before{
    margin-left         : 0px;
    font-size           : 20px;
}   
}
.ifacebook .fa
{
    color:#fff;
    border :1px solid #3B5998;
	 background-color        : #3B5998;  
}

.ifacebook .fa:hover{
    
    background-color        : #3B5998;    
    color                   : #fff;
    border                  : 1px solid #3B5998;

}

.itwittter .fa{
    color               : #fff;
    border              :1px solid #33ccff;
	 background-color        : #33ccff; 
}

.itwittter .fa:hover{
    
    background-color        : #33ccff;    
    color                   : #fff;
    border                  : 1px solid #33ccff;

}

.igoogle .fa{
    color               : #fff;
    border              :1px solid #BD3518;
	background-color        : #BD3518;  
}
.igoogle.text-red .fa{
    color               : red;
    border              :1px solid #BD3518;
}

.igoogle .fa:hover
{
    background-color        : #BD3518;    
    color                   : #fff;
    border                  : 1px solid #BD3518;
}
.iLinkedin .fa{
    color               : #fff;
    border              :1px solid #007bb7;
	background-color        :#007bb7;  
}
.iLinkedin .fa:hover{
    
    background-color        :#007bb7;    
    color                   : #fff;
    border                  : 1px solid #007bb7;

}


/**************** Testimonials****************/
.testimonial{ margin: 0 20px 50px; }
.testimonial .pic{
    display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 15px 15px 0;
}
.testimonial .pic img{
    width: 100%;
    border-radius: 50%;
	height:90px;
}
.testimonial .testimonial-profile{
    display: inline-block;
    position: relative;
    top: 15px;
}
.testimonial .title{
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #2f2f2f;
    text-transform: capitalize;
    margin: 0 0 7px 0;
}
.testimonial .post{
    display: block;
    font-size: 14px;
    color: #5d7aa7;
}
.testimonial .description{
    padding: 20px 22px;
 	background: rgba(0, 0, 0, .2);
    font-size: 15px;
    color: #fff;
    line-height: 25px;
    margin: 0;
    position: relative;
}
.testimonial .description:before,
.testimonial .description:after{
    content: "";
    border-width: 18px 0 0 18px;
    border-style: solid;
    border-color: rgba(0, 0, 0, .2) transparent transparent;
    position: absolute;
    bottom: -18px;
    left: 0;
}
.testimonial .description:after{
    border-width: 18px 18px 0 0;
    left: auto;
    right: 0;
}
.owl-theme .owl-controls{
    margin-top: 10px;
    margin-left: 0;
}
.owl-theme .owl-controls .owl-buttons div{
    opacity: 0.8;
    background: transparent;
}
.owl-prev:before,
.owl-next:before{
    content: "\f053";
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #1f487e;
}
.owl-next:before{ content: "\f054"; }

/************** Pricing Table ********************/

  .columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price-header {
    background: #00bfff;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}


/******** Icon Color ********/
.icon-clr
{
  background: #00bfff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}

.icon-bg {
   background:#00bfff;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 57px;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
}
.icon-bg1 {
    background: #fff;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 52px;
    border-radius: 50%;
    color: #363636;
    font-size: 18px;
}
/*********************/
.slider {
        width: 100%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
	
	
/********** Buttons ***********/
.btn-bg {
    background: #00bfff;
    text-align: center;
    border-radius: 50px;
    color: #fff;
    border: 0px !IMPORTANT;
}
.btn-bg:hover {
    background: rgba(0, 191, 255, .6);
    text-align: center;
    border-radius: 50px;
    color: #fff;
    border: 0px !IMPORTANT;
}


.nav-pills .nav-link {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    font-weight: bold;
    font-size: 12px;
    padding: 8px 25px;

}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #777;
    background-color: #fff;
    border-color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    font-weight: bold;
    font-size: 12px;
    padding: 8px 25px;
}
/****************** Contact Form ************/
.contact-form input.form-control, .contact-form textarea.form-control
{
    border-radius: 0;
    font-size: 13px;
    padding: 10px;
}

/*********** Screen ***********/
.myfarm {
    position: relative;
}.myfarmdis img {
    display: block;
    left: 50%;
    position: absolute;
    top: -20px;
    transform: translateX(-50%);
    width: 32%;
    z-index: 2;
}.carousel.slide {
    margin-top: 35px;
    margin-bottom: 50px;
}
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/********************** Footer ***************/
footer a
{
	color:#fff;
}