 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 320px) {
/* navbar */
.navbar-brand{width: 70px;height: 50px;}
.navbar-toggler{position:absolute;top: 20px;left: 250px;}
/* overlay menu */
.overlay .closebtn {position: relative;top: 20px;left: 5px;font-size: 20px; }
.overlay-content {position: relative;top: -3%;text-align: center;}
.Topics a{font-size: 15px; display: inline;}
.Sites a{font-size: 10px; display: inline;}
.menu-head1,.menu-head2{position: relative;top: 5%; color: aqua;}
.span-hr1,.span-hr2{width: 60px;height: 3px; background-color: aqua;position:relative;
top: 15px;left:0px;}

/* navbar end */


/*first section*/

.par-head2{font-size: 50px;position: relative;top:30px;letter-spacing: 3px;}
.para-tagline2{font-size: 17px;position: relative;top:35px;}
.para-underline2{position: relative;top:35px;}
.left-side-pannal{position: relative;top: -45px;}
.vl{position: relative;top: 40px;}
.vl span{position: relative;font-size: 20px;top: 3px;left: 20px;letter-spacing: 3px;}
.stories{position: relative;top: 40px;}
.stories img{width: 80px;height: 80px;}
.stories-div{padding: 0%;}
.stories-div h6{position: relative;top: 10px;font-weight: bold;color: black; }
.spaan h6{position: relative;top: 40px;}
.new-div img{width: 290px; }
.para-1 {position: absolute;left: 50px; top: 250px;}
.para-1 h6,h1{position: relative;top: -148px;font-size: 15px;width: 230px;color: #000;font-weight: bold;}
.cpplus{position: relative;width: 280px; left: -40px;}
.cd1{margin-bottom: 5px; }
.cd2{margin-top: 5px;}
.card-title-1{position: relative;color: black;top: 1px; font-size: 11px;}
.card-text{font-size: 10px;}
.card-body a{font-size: 9px;padding: 0%;letter-spacing: 3px;}


/* second-section */
.parallaxone{ width: 100%;height: 100%;  }
.par-head{font-size: 20px;position: relative;top:10px;}
.para-tagline{font-size: 15px;position: relative;top:10px;color:#fff;}
.para-underline-3 {position: relative;top: 10px;background-color:#fff;}

/* 3rd-section */
.cheight{
  min-width: 100%;
  min-height: 600px;
	 }
.div-sec{position: relative;top: 140px;}
.div-sec-h1{font-size: 50px;color: aliceblue;}
.div-sec-h6{font-size: 15px;position: relative;top: -110px;color: aliceblue;}
.div-headding3{height: 3px;position: relative;top: -200px;}

.vdo1{position: relative;width: 100%;}


.context-overlay{position: relative;top: -300px;left: 0px;}
.htext{font-size: 10px;position: relative;top: -30px; left: 0px; color: blanchedalmond;}
.ptext{font-size: 20px;letter-spacing: 2px;position:absolute;top: -10px;}
.ptextt{font-size: 10px;position: absolute; width: 230px; top: 40px;color: blanchedalmond;}
.bbtn{width:290px;font-size: 15px;position: relative;top: 110px; left: -50px;}

.caro-section{position:relative;top: 270px;}
.scroller{position: relative;top: -290px;font-size: 30px;margin-bottom: 10px;}
/* 4th section */
.pet-stories{font-size: 30px;}
.pet-stories,.center {position: relative; top:-300px;}

/* 5th section */
.parallaxtwo2{position: relative; top:-20%;max-width: 100vw;height: 500vh;}
.para-underline3{position: relative;top:30px;}
.vl1{position: relative;top: 1050px;left: 0px;}
.vl1 span{position: relative;font-size: 20px;left: 20px;}
.new-div-1 img{width: 290px;}
.para-2 h1,h6{position: relative;top: -290px;}
.cc{position: relative;left: -50px;width: 300px; }
}
/*..............................*/

.headding-3{
	margin-top: 130px;
	color: black;
	width: 100%;
	font-size: 30px;
}
.span-hr4{

  	top: 10%;
 
}

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {


 }

 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {


 }

 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {


 }

 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {


 }
