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;
}

.footer-area {
background-color:#f3f6f7;
}

.footer-area .footer_logo {
margin-bottom:30px;
display:inline-block;
}

.footer-area .copyright_part {
background-color:#0d1820;
padding:26px 0;
}

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;
}

.button {
  background-color: maroon; /* Green */
  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: center;
}

.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;
}

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

.text-white {
color:#fff;
}

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

.text-left {
text-align:left;
}

.text-middle {
  text-align:center;
  padding-top: 300px;
}
@media (max-width: 370px) {
.text-middle {
      text-align:center;
      padding-top: 190px;
      font-size: 30px;
  }
}
@media (width: 411px) {
.text-middle {
      text-align:center;
      padding-top: 200px;
      font-size: 30px;
  }
}
@media (width: 414px) {
.text-middle {
      text-align:center;
      padding-top: 200px;
      font-size: 30px;
  }
}
@media (width: 375px) {
.text-middle {
      text-align:center;
      padding-top: 200px;
      font-size: 30px;
  }
}
@media (width: 360px) {
.text-middle {
      text-align:center;
      padding-top: 200px;
      font-size: 30px;
  }
}

.text-h1-content {
  color: mediumvioletred;
}

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

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

.default-header {
width:100%!important;
-webkit-transition:all .3s ease 0;
-moz-transition:all .3s ease 0;
-o-transition:all .3s ease 0;
transition:all .3s ease 0;
position:absolute;
top:0;
left:0;
z-index:9;
}

.default-header img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 13px;
}
@media (max-width: 800px) {
.default-header img {
      height: 100px;
      width: 90px;
  }
}

.home-banner-area {
background:url(https://raw.githubusercontent.com/TutorialsAndroid/tutorialsandroid.github.io/master/img/home-banner-bg.png) no-repeat;
background-size:cover!important;
background-position:center center;
max-height:1500px;
filter:hue-rotate(70deg);
}
@media (max-width: 1024px) {
.home-banner-area {
      max-height:1000px;
  }
}
@media (max-width: 830px) {
.home-banner-area {
      height:800px;
  }
}

.home-banner-left h1 {
color:#222;
font-size:48px;
line-height:1em;
margin-bottom:20px;
}

.banner-area {
background:url(https://raw.githubusercontent.com/TutorialsAndroid/tutorialsandroid.github.io/master/img/home-banner-bg.png) no-repeat center;
background-position:right;
min-height:510px;
}

@media max-width991px{
.section-title {
padding-bottom:40px;
}

.home-banner-left h1 {
font-size:45px;
}

.home-banner-area .fullscreen {
height:700px!important;
}

.home-banner-left {
text-align:center;
}

.home-banner-left h1 {
font-size:36px;
}
}
/* INDEX PAGE CSS END HERE */