body {
color:#828bb2;
font-family:Roboto,sans-serif;
font-size:14px;
font-weight:300;
line-height:1.625em;
position:relative;
margin: 0;
}

/* BLOG PAGE CSS START HERE */
.section_padding {
padding:70px 0;
}

a {
text-decoration:none;
-webkit-transition:.5s;
transition:.5s;
}

a:hover {
outline:0;
text-decoration:none;
}

h1,h2,h3,h4,h5,h6 {
color:#242429;
font-family:"Playfair Display",serif;
line-height:1.2em;
}

p {
font-family:Roboto,sans-serif;
line-height:1.929;
font-size:16px;
margin-bottom:0;
color:#888;
}

h2 {
color:#242429;
font-weight:600;
line-height:1.222;
font-size:30px;
}

h3 {
line-height:25px;
font-size:24px;
}

h5 {
line-height:22px;
font-size:16px;
}

img {
max-width:100%;
}

a:focus {
text-decoration:none;
outline:0;
box-shadow:none;
-webkit-transition:1s;
transition:1s;
}

.mb_110 {
margin-bottom:110px;
}

.mb_130 {
margin-bottom:130px;
}

.blog_area a {
color:#666!important;
text-decoration:none;
-webkit-transition:.5s;
transition:.5s;
}

.single-blog {
overflow:hidden;
margin-bottom:30px;
}

.single-blog:hover {
box-shadow:0 10px 20px 0 rgba(42,34,123,.1);
}

.single-blog h4 {
border-bottom:1px solid #dfdfdf;
padding-bottom:34px;
margin-bottom:25px;
}

.single-blog a {
font-size:20px;
font-weight:600;
}

.single-blog .date {
color:#888;
text-align:left;
display:inline-block;
font-size:13px;
font-weight:300;
}

.single-blog .single-blog-content {
padding:30px;
}

.causes_item {
background:#fff;
}

.blog_item {
margin-bottom:50px;
}

.blog_details {
box-shadow:0 10px 20px 0 rgba(221,221,221,.3);
padding:30px 0 20px 10px;
}

.blog_details a {
color:#ff8b23;
}

.blog_details a:hover {
color:#0065e1!important;
}

.blog_details h2 {
font-size:18px;
font-weight:600;
margin-bottom:8px;
}

.blog_item_img .blog_item_date {
position:absolute;
bottom:-10px;
left:10px;
display:block;
color:#fff;
background-color:#0065e1;
border-radius:5px;
padding:8px 15px;
}

.blog_item_img .blog_item_date h3 {
font-size:22px;
font-weight:600;
color:#fff;
margin-bottom:0;
line-height:1.2;
}

.blog_item_img .blog_item_date p {
font-size:18px;
margin-bottom:0;
color:#fff;
}

.home_menu {
position:absolute;
left:0;
top:0;
width:100%;
z-index:999;
}

.main_menu .navbar-brand {
padding:0!important;
}

.main_menu .navbar {
padding:0;
}

.main_menu .main-menu-item {
text-align:center;
justify-content:center;
}

.single_page_menu .logo_2 {
display:none;
}

.single_page_menu .logo_1 {
display:inherit;
}



h1 {
font-size:36px;
}

h4 {
font-size:18px;
}

h6 {
font-size:14px;
}

.blog_part .card {
border:0 solid transparent;
}

.blog_part .single-home-blog .card {
border-radius:0;
background-color:transparent;
position:relative;
}

.blog_part .single-home-blog .card .card-body {
-webkit-transition:.5s;
transition:.5s;
border:1px solid #ddd;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
padding:30px 25px 23px;
}

.blog_part .single-home-blog .card .card-body a {
color:#fff;
text-transform:capitalize;
-webkit-transition:.8s;
transition:.8s;
}

.blog_part .single-home-blog .card h5 {
font-weight:700;
line-height:1.5;
font-size:24px;
-webkit-transition:.8s;
transition:.8s;
text-transform:capitalize;
}

.blog_part .single-home-blog .card h5:hover {
-webkit-transition:.8s;
transition:.8s;
color:#0065e1;
}

.blog_area a :hover,.blog_area a:hover,.footer-area .copyright_part a {
color:#0065e1;
}

.causes_item .causes_img,.blog_item_img {
position:relative;
}

.blog_details p,.mb-30 {
margin-bottom:30px;
}

@media only screen and min-width992px and max-width1200px{
.section_padding {
padding:80px 0;
}

.mb_130 {
margin-bottom:70px;
}

.main_menu .main-menu-item {
padding-left:25px;
}

.blog_part {
padding-bottom:50px;
}

.blog_part .single-home-blog .card .card-body {
padding:20px;
}

.blog_part .single-home-blog .card h5 {
margin-bottom:10px;
font-size:18px;
}
}

@media only screen and min-width768px and max-width991px{
.section_padding {
padding:70px 0;
}

.mb_130 {
margin-bottom:70px;
}

.blog_part {
padding-bottom:50px;
}

.blog_part .single-home-blog {
margin-bottom:20px;
}

.blog_part .single-home-blog .card h5 {
margin-bottom:10px;
}
}

@media max-width576px{
.section_padding {
padding:70px 0;
}

h2 {
font-size:22px;
line-height:25px;
}

h3 {
font-size:20px;
}

.mb_110 {
margin-bottom:220px;
}

.mb_130 {
margin-bottom:70px;
}

.main_menu .navbar-brand {
max-width:120px;
}

.main_menu .navbar {
padding:15px 0;
}

.blog_part {
padding-bottom:50px;
}

.blog_part .single-home-blog {
margin-bottom:20px;
}

.blog_part .single-home-blog .card .card-body {
padding:15px 10px;
}

.blog_part .single-home-blog .card h5 {
margin-bottom:5px;
font-size:17px;
}
}

@media only screen and min-width576px and max-width767px{
.section_padding {
padding:70px 0;
}

h2 {
font-size:24px;
line-height:25px;
}

.mb_130 {
margin-bottom:70px;
}

.main_menu .navbar-brand {
max-width:130px;
}

.main_menu .navbar {
padding:15px 0;
}

.blog_part {
padding-bottom:50px;
}

.blog_part .single-home-blog {
margin-bottom:20px;
}

.blog_part .single-home-blog .card .card-body {
padding:15px;
}

.blog_part .single-home-blog .card h5 {
margin-bottom:10px;
font-size:16px;
}
}

@media only screen and min-width1200px and max-width3640px{
.container {
/*max-width:1170px;*/
}
}

@media max-width1200px{
[class*=hero-ani-] {
display:none!important;
}
}

@media max-width800px{
.single-blog {
margin-bottom:30px;
}
}

@media max-width1199px{
.single-blog .single-blog-content {
padding:15px;
}

.single-blog h4 {
transition:all .3s linear 0;
border-bottom:1px solid #dfdfdf;
padding-bottom:14px;
margin-bottom:12px;
}

.single-blog h4 a {
font-size:18px;
}
}

@media min-width768px{
.blog_details {
padding:60px 30px 35px 35px;
}

.blog_details h2 {
font-size:24px;
margin-bottom:15px;
}

.blog_item_img .blog_item_date {
bottom:-20px;
left:40px;
padding:13px 30px;
}

.blog_item_img .blog_item_date h3 {
font-size:30px;
}

.blog_item_img .blog_item_date p {
font-size:18px;
}
}

@media max-width991px{
.main_menu .navbar {
padding:15px 0;
}

.main_menu .main-menu-item {
text-align:left!important;
}

.navbar-nav {
align-items:start!important;
}

.main_menu .main-menu-item .nav-item,.main_menu .main-menu-item .nav-item a {
padding:5px 15px!important;
}
}

.single-post-area .quote-wrapper {
  background: rgba(130, 139, 178, 0.1);
  padding: 15px;
  line-height: 1.733;
  color: #888888;
  font-style: italic;
  margin-top: 25px;
  margin-bottom: 25px;
}

@media (min-width: 768px) {
  .single-post-area .quote-wrapper {
    padding: 30px;
  }
}
.single-post-area .quotes {
  background: #fff;
  padding: 15px 15px 15px 20px;
  border-left: 2px solid;
}

@media (min-width: 768px) {
  .single-post-area .quotes {
    padding: 25px 25px 25px 30px;
  }
}
.image{
    height: 100px;
    width: 100px;
  }

#myImg,#myImg2,#myImg3,#myImg4,#myImg5,#myImg6,#myImg7,#myImg8,#myImg9 {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover,#myImg2:hover,#myImg3:hover,#myImg4:hover,#myImg5:hover,#myImg6:hover,#myImg7:hover,#myImg8:hover,#myImg9:hover {
  opacity: 0.7;
}

/* The Modal (background) */
.modal,.modal2,.modal3,.modal4,.modal5,.modal6,.modal7,.modal8,.modal9 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content,.modal-content2,.modal-content3,.modal-content4,.modal-content5,.modal-content6,.modal-content7,.modal-content8,.modal-content9 {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
} 

/* Add Animation */
.modal-content, #caption,.modal-content2, #caption2,.modal-content3, #caption3,.modal-content4, #caption4,.modal-content5, #caption5,.modal-content6, #caption6,.modal-content7, #caption7,.modal-content8, #caption8,.modal-content9, #caption9 {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform:scale(0)
  } 
  to {
    -webkit-transform:scale(1)
  }
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close,.close2,.close3,.close4,.close5,.close6,.close7,.close8,.close9 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,.close2:hover,.close3:hover,.close4:hover,.close5:hover,.close6:hover,.close7:hover,.close8:hover,.close9:hover,
.close:focus,.close2:focus,.close3:focus,.close4:focus,.close5:focus,.close6:focus,.close7:focus,.close8:focus,.close9:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
  .modal-content2 {
    width: 100%;
  }
  .modal-content3 {
    width: 100%;
  }
   .modal-content4 {
    width: 100%;
  }
  .modal-content5 {
    width: 100%;
  }
  .modal-content6 {
    width: 100%;
  }
  .modal-content7 {
    width: 100%;
  }
  .modal-content8 {
    width: 100%;
  }
   .modal-content9 {
    width: 100%;
  }

  #myVideo {
    width: 100%;
  }
}

/* BLOG PAGE CSS END HERE */

/* INDEX PAGE CSS START HERE */
h1,h2,h3,h4,h5,h6 {
  font-family:"Playfair Display",serif;
  color:#222;
  margin-bottom:0;
  margin-top:0;
  font-weight:900;
  line-height:1.2em;
}

.h1,.h2,.h4,.h5,.h6 {
margin-bottom:0;
margin-top:0;
font-family:"Playfair Display",serif;
font-weight:900;
color:#222;
}

.h1,h1 {
  font-size:36px;
}

.h4,h4 {
  font-size:18px;
}

.h6,h6 {
  font-size:14px;
  color:#222;
}

h1 {
  font-size:42px;
}

h4 {
  font-size:21px;
}

h6 {
  font-size:14px;
}

.h2,h2,h2 {
  font-size:30px;
}

.h5,h5,h5 {
  font-size:16px;
}

@font-face {
  font-family: Skyhawk;
  src: url(file:///E:/Projects/tutorialsAndroid/font/Skyhawk.otf);
}

@font-face {
  font-family: Chromo;
  src: url(file:///E:/Projects/tutorialsAndroid/font/Chromo.ttf);
}

.mt-20 {
  margin-top:20px;
}

.button {
  background-color: maroon;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
} 

.div-button {
  text-align: left;
  padding-left: 200px;
}
@media (max-width: 800px) {
.div-button {
      text-align:center;
      padding-left: 0px;
  }
}

.text-black {
  color:black;
}

.text-center {
  font-family: Chromo;
  font-weight: normal;
  text-align:left;
  font-size: 20px;
  padding-left: 200px;
}
@media (max-width: 800px) {
.text-center {
    text-align:center;
    padding-left: 0px;
    font-size: 20px;
    margin-left: 5px;
    margin-right: 5px;
  }
}

.text-middle {
  font-family: Skyhawk;
  font-weight: normal;
  text-align:left;
  color: mediumvioletred;
  padding-top: 100px;
  padding-left: 200px;
  margin-left: 5px;
  margin-right: 5px;
}
@media (max-width: 800px) {
.text-middle {
  text-align:center;
  padding-left: 0px;
  font-size: 30px;
  }
}

.text-h1-content {
  color: mediumvioletred;
  font-size: 30px;
}

.text-middle-content {
  text-align:center;
}

.text-p {
  text-align: center;
  padding-bottom: 30px;
  font-size: 20px;
  margin-left: 7px;
  margin-right: 7px;
}

.home-banner-area {
  max-height: 500px;
  position:relative;
}

.home-banner-area .img12 {
  float: right;
  padding-right: 300px;
  padding-top: 30px;
  filter:hue-rotate(20deg);
}

@media (max-width: 800px) {
  .home-banner-area .img12 {
     display: none;
  }

  .home-banner-area {
    max-height: 800px;
  }
}

.content {
  text-align: center;
  position:relative;
  padding-top: 200px;
}
@media (max-width: 800px) {
  .content {
    padding-top: 50px;
  }
}  

/* INDEX PAGE CSS END HERE */

/* ABOUT ME SECTION */
.about-me {
  padding-top:30px;
  padding-bottom:30px;
}

.about-me h1 {
  color:  teal;
  text-align: center;
  font-weight: normal;
  font-size: 30px;
}

.about-me h2 {
  color: darkcyan;
  text-align: center;
  font-size: 27px;
}

.about-me p {
  font-weight: normal;
  font-size: 25px;
}

.about-me img {
  border-radius: 50%;
  width:120px;
  height:120px;
  margin-top: 20px;
} 

.about-banner-area .img13 {
  width: 700px;
  height: 500px;
   float: right;
  padding-right: 300px;
  padding-top: 30px;
  filter:hue-rotate(20deg);
}
@media (max-width: 800px) {
  .about-banner-area .img13 {
    display: none;
  }
}

.mb-50 {
margin-bottom:50px;
}

.ml-150 {
  margin-left: 350px;
}
@media (max-width: 800px) {
  .ml-150 {
  margin-left: 60px;
}
}

.mt-70 {
  margin-top: 70px;
}

.primary-btn {
color:#fff;
background:#e45447;
overflow:hidden;
border-radius:40px;
font-size:15px;
font-weight:600;
display:inline-block;
border:1px solid #e45447;
vertical-align:middle;
position:relative;
z-index:1;
cursor:pointer;
text-align:center;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transition:all .3s ease 0;
-moz-transition:all .3s ease 0;
-o-transition:all .3s ease 0;
transition:all .3s ease 0;
padding:0 52px;
}

.primary-btn:before {
content:attr(data-text);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-transition:all .3s ease 0;
-moz-transition:all .3s ease 0;
-o-transition:all .3s ease 0;
transition:all .3s ease 0;
-webkit-transition-timing-function:cubic-bezier(.75,0,.125,1);
-moz-transition-timing-function:cubic-bezier(.75,0,.125,1);
-o-transition-timing-function:cubic-bezier(.75,0,.125,1);
transition-timing-function:cubic-bezier(.75,0,.125,1);
color:#fff;
padding:13px 0;
}

.primary-btn:hover {
background:#fff;
border:1px solid #e45447;
}

.primary-btn:hover:before {
opacity:0;
-webkit-transform:translate3d(0,100%,0);
-moz-transform:translate3d(0,100%,0);
-ms-transform:translate3d(0,100%,0);
-o-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);
}

.primary-btn:hover span {
opacity:1;
color:#e45447;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

.primary-btn:hover span:nth-child(1) {
-webkit-transition-delay:10ms;
-moz-transition-delay:10ms;
-o-transition-delay:10ms;
transition-delay:10ms;
}

.primary-btn:hover span:nth-child(2) {
-webkit-transition-delay:50ms;
-moz-transition-delay:50ms;
-o-transition-delay:50ms;
transition-delay:50ms;
}

.primary-btn:hover span:nth-child(3) {
-webkit-transition-delay:.1s;
-moz-transition-delay:.1s;
-o-transition-delay:.1s;
transition-delay:.1s;
}

.primary-btn:hover span:nth-child(4) {
-webkit-transition-delay:.15s;
-moz-transition-delay:.15s;
-o-transition-delay:.15s;
transition-delay:.15s;
}

.primary-btn:hover span:nth-child(5) {
-webkit-transition-delay:.2s;
-moz-transition-delay:.2s;
-o-transition-delay:.2s;
transition-delay:.2s;
}

.primary-btn:hover span:nth-child(6) {
-webkit-transition-delay:.25s;
-moz-transition-delay:.25s;
-o-transition-delay:.25s;
transition-delay:.25s;
}

.primary-btn:hover span:nth-child(7) {
-webkit-transition-delay:.3s;
-moz-transition-delay:.3s;
-o-transition-delay:.3s;
transition-delay:.3s;
}

.primary-btn:hover span:nth-child(8) {
-webkit-transition-delay:.35s;
-moz-transition-delay:.35s;
-o-transition-delay:.35s;
transition-delay:.35s;
}

.primary-btn:hover span:nth-child(9) {
-webkit-transition-delay:.4s;
-moz-transition-delay:.4s;
-o-transition-delay:.4s;
transition-delay:.4s;
}

.primary-btn:hover span:nth-child(10) {
-webkit-transition-delay:.45s;
-moz-transition-delay:.45s;
-o-transition-delay:.45s;
transition-delay:.45s;
}

.primary-btn:hover span:nth-child(11) {
-webkit-transition-delay:.5s;
-moz-transition-delay:.5s;
-o-transition-delay:.5s;
transition-delay:.5s;
}

.primary-btn:hover span:nth-child(12) {
-webkit-transition-delay:.55s;
-moz-transition-delay:.55s;
-o-transition-delay:.55s;
transition-delay:.55s;
}

.primary-btn:hover span:nth-child(13) {
-webkit-transition-delay:.6s;
-moz-transition-delay:.6s;
-o-transition-delay:.6s;
transition-delay:.6s;
}

.primary-btn:hover span:nth-child(14) {
-webkit-transition-delay:.65s;
-moz-transition-delay:.65s;
-o-transition-delay:.65s;
transition-delay:.65s;
}

.primary-btn:hover span:nth-child(15) {
-webkit-transition-delay:.7s;
-moz-transition-delay:.7s;
-o-transition-delay:.7s;
transition-delay:.7s;
}

.primary-btn:hover span:nth-child(16) {
-webkit-transition-delay:.75s;
-moz-transition-delay:.75s;
-o-transition-delay:.75s;
transition-delay:.75s;
}

.primary-btn:hover span:nth-child(17) {
-webkit-transition-delay:.8s;
-moz-transition-delay:.8s;
-o-transition-delay:.8s;
transition-delay:.8s;
}

.primary-btn:hover span:nth-child(18) {
-webkit-transition-delay:.85s;
-moz-transition-delay:.85s;
-o-transition-delay:.85s;
transition-delay:.85s;
}

.primary-btn:hover span:nth-child(19) {
-webkit-transition-delay:.95s;
-moz-transition-delay:.95s;
-o-transition-delay:.95s;
transition-delay:.95s;
}

.primary-btn:hover span:nth-child(20) {
-webkit-transition-delay:1s;
-moz-transition-delay:1s;
-o-transition-delay:1s;
transition-delay:1s;
}

.primary-btn span {
display:inline-block;
opacity:0;
color:#fff;
-webkit-transform:translate3d(10,10px,0);
-moz-transform:translate3d(10,10px,0);
-ms-transform:translate3d(10,10px,0);
-o-transform:translate3d(10,10px,0);
transform:translate3d(10,10px,0);
-webkit-transition:all .3s ease 0;
-moz-transition:all .3s ease 0;
-o-transition:all .3s ease 0;
transition:all .3s ease 0;
-webkit-transition-timing-function:cubic-bezier(.75,0,.125,1);
-moz-transition-timing-function:cubic-bezier(.75,0,.125,1);
-o-transition-timing-function:cubic-bezier(.75,0,.125,1);
transition-timing-function:cubic-bezier(.75,0,.125,1);
padding:12px 0;
}

.banner-content {
text-align:left;

}

.banner-content h1 {
font-size:60px;
font-weight:700;
line-height:66px;
margin-top:30px;
margin-bottom:30px;
}

.banner-content .me {
background:#90acd1;
display:inline-block;
color:#fff;
font-size:16px;
border-radius:8px;
position:relative;
padding:18px;
}
@media (max-width: 800px) {
  .banner-content .me {
    background:#90acd1;
    color:#fff;
    font-size:16px;
    border-radius:8px;
    margin-left: 50px;
  }
}

.banner-content .me:after {
content:'';
position:absolute;
right:0;
bottom:-15px;
width:0;
height:0;
border-left:26px solid transparent;
border-right:0 solid transparent;
border-top:24px solid #90acd1;
}

.banner-content .designation {
max-width:390px;
font-size:30px;
font-weight:400;
line-height:42px;
}

.banner-content .designation .designer {
color:#e45447;
}

.banner-content .designation .developer {
color:#90acd1;
}

.banner-img {
text-align:right;
position:relative;
left:160px;
height: 100px;
width: 100px;
}

@media (max-width:767px) {
  .primary-btn {
  padding:0 35px;
}

.primary-btn:before,.primary-btn span {
  padding:8px 0;
  }
}

@media (max-width:1024px) {
  .banner-content h1 {
    font-size:45px;
  }
}

@media (max-width:576px) {
  .banner-content h1 {
    font-size:35px;
}

.banner-content .designation {
  font-size:25px;
  }
}

@media (max-width:325px){
  .banner-content h1 {
    font-size:32px;
  }
}

@media (max-width:1480px) {
  .banner-img {
    left:0;
  }
}  

.banner-img img {
max-width:80%;
}
}

@media (max-width:991px){
  .banner-img {
    display:none;
  }
}

/* END OF ABOUT ME SECTION */