style.css

/*
Theme Name: odyssey
Theme URI: https://shubhampandey.in/odyssey
Author: Shubham Pandey
Author URI: http://shubhampandey.in
Description: A Bootstrap Theme Based on Clean Blog Template from Start Bootstrap. A beautifully designed responsive blogging theme. Custom header with Parallax effect.
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: odyssey
Tags: blog, one-column, custom-header, custom-menu, editor-style, featured-image-header, featured-images, rtl-language-support, sticky-post, translation-ready,  custom-colors, threaded-comments, custom-background

odyssey WordPress Theme, Copyright 2017 Shubham Pandey
odyssey is distributed under the terms of the GNU GPL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

odyssey is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/

Start Bootstrap - Clean Blog v3.3.7+1 (http://startbootstrap.com/template-overviews/clean-blog)
Copyright 2013-2017 Start Bootstrap
Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)

Bootstrap v3.3.7 (http://getbootstrap.com)
Copyright 2011-2017 Twitter, Inc.
Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome
License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

*/

body{
	word-wrap: break-word;
}
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.8em;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
.logged-in.admin-bar #top-nav{
	margin-top: 32px;
}

/*--------------------------------------------------------------
Alignments
--------------------------------------------------------------*/

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.post-preview a{
	text-decoration: none;
}
.post-preview a:hover{
	text-decoration: none;
}
.post-preview .post-meta a:hover{
	text-decoration: none;
}
.site-footer{
	font-style: italic;
}
.site-footer a{
	color: #777;
}
.post-info{
	font-size: 0.8em;
	font-style: italic;
}
.post-info span:not(:last-child):after{
	content: "\00a0\00a0/\00a0\00a0";
}
.post-heading .meta.posted-on{
	font-weight: 800;
	margin-top: 0.8em;
}
.content-area .sticky{
	background: #eee;
	padding: 30px;
	border-radius: 20px;
}
#header-text .site-heading .subheading{
	font-weight: 800;
}
.intro-header .post-heading{
	padding-left: 15px;
}
img{
	display: block;
	max-width: 100%;
	height: auto;
}
.read-more{
	color: #21759b;
}
#header-text{
	text-shadow: 1px 1px 1px #888;
}
#sidebar{
	clear: both;
}
.navigation.posts-navigation .nav-links{
	height: 5em;
}
.navigation.posts-navigation .nav-links div{
	display: inline;
}
.navigation.posts-navigation .nav-links div a{
	color: white;
	padding: 0.6em 1.2em;
	cursor: pointer;
	background-color: #5bc0de;
	font-weight: bold;
}
.navigation.posts-navigation .nav-links .nav-next a{
	float: right;
}
.navigation.posts-navigation .nav-links .nav-previous a{
	float: left;
}
.navigation.posts-navigation .nav-links div a:hover{
	background-color: #31b0d5;
	text-decoration: none;
}
.comment-list,
.comment-list ol,
.comment-list ol ol{
	list-style: none;
}
.comment-list .comment-content ol{
	list-style: initial;
}
.comment-list{
	padding: 0;
}
.comment-list .comment{
	border: 1px solid #ddd;
	border-right: 0px;
	border-bottom: 0px;
	padding: 1em;
	margin-top: 1em;
}
.comment-list ol.children{
	padding: 0;
}
.comment-meta{
	padding: 0em;
}
.comment-metadata{
	margin-top: -12px;
    margin-bottom: 15px;
    margin-left: 4em;
    font-size: 0.7em;
}
#main .comment-author.vcard img{
	display: inline;
	border-radius: 50%;
	width: 48px;
	height: 48px;
}
.comment-content{
	margin: 1em; 
}
.comment-body .reply{
	margin-left: 1em;
	margin-bottom: 1em;
}
.comment-body .reply a{
	color: #337ab7;
	font-size: 0.9em;
}
.comment-form .form-group{
	font-size: 0.9em;
	display: flex;
	flex-wrap: wrap;
}
.wp-caption,
.gallery-caption{
	border: 1px solid #ddd;
	padding: 0.3em;
	font-size: 0.7em;
	max-width: 100%;
}
.wp-caption-text{
	text-align: center;
}
.wp-caption img{
	margin: 0 auto;
}
/* ===== == = === 48em (768px) === = == ===== */

@media only screen and (max-width : 48em) {
	.logged-in.admin-bar #top-nav{
		margin-top: 46px;
	}
	.comment-form .form-group{
		display: block;
	}
}
/* WordPress Gallery 
------------------------------------------ */

.gallery {
	margin-left: -0.5em;
	margin-right: -0.5em;
}

.gallery:after {
	display: table;
	content: "";
	clear: both;
}

.gallery-item {
	margin: 0;
	float: left;
	padding: 0.5em;
	max-width: 100%;
}

.gallery-item img {
	margin: 0 auto;
}
.gallery-icon{
	border: 1px #ddd solid;
}

.gallery-columns-1 .gallery-item {
    width: 100%;
    float: none;
}
.gallery-columns-2 .gallery-item {
    width: 50%
}
.gallery-columns-3 .gallery-item {
    width: 33.3333%
}
.gallery-columns-4 .gallery-item {
    width: 25%
}
.gallery-columns-5 .gallery-item {
    width: 20%
}
.gallery-columns-6 .gallery-item {
    width: 16.6667%
}
.gallery-columns-7 .gallery-item {
    width: 14.2857%
}
.gallery-columns-8 .gallery-item {
    width: 12.5%
}
.gallery-columns-9 .gallery-item {
    width: 11.1111%
}

.gallery-columns-2 .gallery-item:nth-child(2n+1),
.gallery-columns-3 .gallery-item:nth-child(3n+1),
.gallery-columns-4 .gallery-item:nth-child(4n+1),
.gallery-columns-5 .gallery-item:nth-child(5n+1),
.gallery-columns-6 .gallery-item:nth-child(6n+1),
.gallery-columns-7 .gallery-item:nth-child(7n+1),
.gallery-columns-8 .gallery-item:nth-child(8n+1),
.gallery-columns-9 .gallery-item:nth-child(9n+1) {
	clear: left;
}
.bypostauthor,
.byuser{
	background: #efe;
}
.page .entry-footer{
	padding: 0.5em;
}
#tinymce {
	margin-left: 1em;
	padding: 1em;
	width: 700px;
}
#submit{
	margin-right: 15px;
}
.post-navigation a{
	display: block;
	text-align: center;
}
blockquote {
	font-style: initial;
}
dd {
	margin: 0 0 1.5em 0;
}
table caption{
	border: 1px solid #ddd;
	padding: 10px;
	text-align: center;
}
aside a{
	color: #0085A1;
}
#wp-calendar,
#wp-calendar th{
	text-align: center;
}
.widget_calendar tbody a {
	background-color: #007acc;
	color: #fff;
	font-weight: 700;
	margin: -8px;
	height: 2.2em;
	align-items: center;
	display: flex;
	justify-content: center;
}
.site-heading hr.small.archive{
	position: relative;
	clip: auto;
}

/*new */

div{
	font-family: 'Ubuntu', sans-serif;
}
.intro-header .site-heading h1{
	font-size: 3.5em;
	z-index: 2;
}
#header-text .site-heading .subheading{
	font-size:1.5em;
	z-index: 2;
}
.head-overlay{
	height: 100vh;
}
.arrow-down{
	cursor: pointer;
}
.hero-section{
	margin-top: 6em;
}
#masthead{
	height: 100vh;
}
.hero-container.container{

}
.menu-bar.navbar-inverse{
	background:transparent;
	border:none;
	width: 100%;
}
.menu-bar.navbar-inverse li a{
	color: white;
	transition:0.7s;
}
.site-title a{
	font-size: 0.8em;
	transition:0.7s;
	margin-top: -8px;

}
.arrow-down{
	position:relative;
	top: -170px;
	width: 40px;
}
.navbar-inverse .navbar-collapse{
	border: none;
}
.section-heading{
	text-align: center;
}
.card{
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	-webkit-transition: 0.3s;
	transition: 0.3s;
	cursor: pointer;
	padding:5px 10px 10px 20px;
	margin-top: 30px;
	border-top: 40px solid rgba(255, 255, 0, 0.63);
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;


}
.card2{
	border-top-color: rgba(0, 164, 255, 0.49);
}
.card3{
	border-top-color: rgba(255, 67, 0, 0.75);

}
.parallex-effect{
	background-image: url("img/parallex.jpg");
	height: 400px;
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.about-us{
	padding-bottom: 50px; 
}
.about-us .section-heading{
	margin-top: 0px;
}
.header-bar.navbar-inverse{
	background-color:#f8f8f8;
	border:none;
}
.header-bar.navbar-inverse li a{
	color: black;
}
.blog-title,h2,h3,h4{
	font-family: 'Ubuntu', sans-serif;
	font-size: 1.2em;
}
p{
	font-size: 0.9em;
}
.overlay{
	height: 100vh;
	background-image: url("img/head-overlay.png");
}
.blog-cover img{
	width: 100%;
	height: 350px;
}

/* footer */
.footer{
	background-image: url("img/footer-back1.png");
	background-size: 100% 100%;
	margin-top: 30px;
	padding: 20px;
}
.row{
	width: 100%;
	margin-left: 0px;
}
.map{
	margin-top: 12px;
	float: right;
}
.wpcf7 input[type="email"]{
	width: 70%;
	padding-left: 7px;
}
.wpcf7 textarea{
	height: 180px;
	width: 70%;
	padding-left: 7px;
}
.shadow{
	position:absolute;
	height: 100%;
	top: 0;
	width: 100%;
	opacity: 0.6;
	background-color: black;
}
/* News */

.news-events{
	padding-bottom: 8%;
}
.news-content{
	background-color: black;
	color: white;
	opacity: 0.7;
	padding: 0px 10px 0px 10px;
	}
.news-title a{
	color: white;
}
.news1{
	height: 400px;
}
.news2,.news3{
	height: 195px;
}
.news-col{
	padding-right: 0px;
}
.donation{
	text-align: center;
	padding-top: 100px;
	padding-bottom: 50px;
}
.donation h1{
	font-family: 'Kaushan Script', cursive;
	font-size: 2.8em;
}
.social-media{
	display: flex;
	justify-content:center;
}
.social-media img{
	margin-left: 10px;
	cursor: pointer;
}
/* team */

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
.m-member-data{
	text-align: center;
	padding-bottom: 20px;
}
.member-image img{
	border-radius: 100px;
	margin-top: 10px;
}

@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}


@media only screen and (max-width: 767px) {
    .header-bar.navbar-inverse,.menu-bar.navbar-inverse{
    	position: relative;

    }
    .header-bar.navbar-inverse,.menu-bar.navbar-inverse li{
    	text-align: center;
    }
   .intro-header .site-heading h1{
	font-size: 1.8em;
	}
	#header-text .site-heading .subheading{
	font-size:1em;
	}
	.arrow-down{
		top: -150px;
	}
	.footer{
		text-align: center;
	}
	.map{
		float: none;
	}

	.intro-header .site-heading .subheading, .intro-header .page-heading .subheading{
		margin-top: 100px !important;
	}
}
@media screen and (max-width: 992px) and (min-width: 767px){
	.intro-header .site-heading h1{
		font-size: 3em;
	}
	#header-text .site-heading .subheading{
		font-size:1.2em;
	}
}
@media only screen and (max-width: 480px) {
	.map{
		width: 250px;
	}
}


/* Animation heading */
.heading-1, .heading-2 ,.heading-3{
  font-size: 75px;
  text-transform: uppercase;
  text-align: center;
}
#item1,#item2,#item3{
  opacity:0;
}
.title,.title1,.title2{
  width: 100%;
  float: left;
  color: #ffffff;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 1;
  animation-name: titleAnimation;
  animation-timing-function: ease;
  animation-duration: 2.5s;
/*   animation-iteration-count:infinite; */
}
.title{
  animation-delay: 0.6s;
  -webkit-animation-fill-mode: forwards;
}
.heading-1{
  top: 50;
  position: absolute;
}
.heading-2 {
  top: 50;
  position: absolute;
}
.hero-container{
	width: 100%;
}
.heading-3 {
  top: 50;
  position: absolute;
}
.intro-header .site-heading .subheading, .intro-header .page-heading .subheading{
	margin-top: 120px;
}
.site-heading.post-34.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-uncategorized{
	    display: flex;
    justify-content: center;
}
.title2{
  animation-delay: 2.5s;
  -webkit-animation-fill-mode: forwards;
  transition:5s;
}
@keyframes titleAnimation {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  80% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 100%);
  }
}