/* Reset Style */

body {

background:#f5f5f5;

}

a, a:hover, a:focus, a:visited {

outline:none;

}

ul {

list-style:none;

padding:0;

margin:0;

}

h1,h2,h3,h4,h5 {

margin:0;

}



/* Reset Bootstrap */

.navbar-collapse {

margin:0 !important;

padding:0 !important;

}

.nav li a {

font-family: 'Titillium Web', Arial;

font-weight:400;

font-size: 14px;

letter-spacing: 0.95px;

text-transform: uppercase;



}



/* HomePage Sections */

.section-box {

background:#fff;

border:1px solid #e5e5e5;

border-radius:4px;

margin-bottom:20px;

box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.05)

}

.section-box h4{

margin:0;

padding:10px;

border-bottom:1px solid #eee;

font-family: 'Titillium Web', Arial;

font-weight:700;

font-size:23px;

color:#156fa3;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

background-color: #efeff0;

}

.first-section-news {

padding:10px;

}

.first-section-news a{

font-family: 'Titillium Web', Arial;

font-weight:700;

font-size:18px;

}

.first-section-news p{

font-family: 'Titillium Web', Arial;

font-weight:400;

font-size:16px;

}

.rest-section-news {

padding: 8px 10px 5px 10px;

border-top:1px solid #eee;

}

.rest-section-news a {

font-family: 'Titillium Web', Arial;

font-weight:700;

font-size:17px;

}



/* Top News Widget */

.top-hits-news {

background:#fff;

border:1px solid #e5e5e5;

box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.05)

}

.top-hits-news h4{

margin:0;

padding:10px;

border-bottom:1px solid #eee;

font-family: 'Titillium Web', Arial;

font-weight:700;

font-size:17px;

color:#ffffff;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

text-transform: uppercase;

background-color: #4682b4;



}

.top-hits-news li{

border-top:1px solid #eee;

padding:5px 0;

overflow:hidden;

}

.top-hits-news li:first-child{

border-top:none;

}

.top-hits-news li a{

font-family: 'Titillium Web', Arial;

font-weight:600;

font-size:15.5px;

}





/* Category & Source Page */

.category-page {

background:#fff;

border:1px solid #e5e5e5;

border-radius:4px;

margin-bottom:20px;

box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.05)

}

.category-page h1{

margin:0;

padding:10px;

border-bottom:1px solid #eee;

font-family: 'Titillium Web', Arial;

font-weight:700;

font-size:22px;

overflow:hidden;

color:#156fa3;

text-transform: uppercase;
background-color: #eee;

}

.category-news li {

border-top:1px solid #eee;

}

.category-news li:first-child {

border-top:none;

}



/* Links Widget */

.links {

background:#fff;

border:1px solid #e5e5e5;

box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.05)

}

.links h4{

margin:0;

padding:10px;

border-bottom:1px solid #eee;

font-family: 'Titillium Web', Arial;

font-weight:700;

font-size:17px;

overflow:hidden;

color:#ffffff;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

text-transform: uppercase;

background-color: #4682b4;


}

.links li {

border-top:1px solid #f5f5f5;

}

.links li:first-child {

border-top:none;

}

.links li a{

display:block;

font-family: 'Titillium Web', Arial;

font-weight:400;

font-size:16.5px;

color:#337AB7;

padding:10px;

text-decoration:none;

}

.links li a i{

color:#ddd;

padding-right:5px;

}

.links li a:hover{

color:#555;

background:#f5f5f5;

text-decoration:none;

}

.links li a:hover i{

color:#999;

}



/* Single Article Page */

.article-page {

background:#fff;

border:1px solid #e5e5e5;

border-radius:4px;

margin-bottom:20px;

box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.15)

}

.article-page h1{

margin:0;

padding:10px;

border-bottom:1px solid #eee;

font-family: 'Titillium Web', Arial;

font-weight:700;

font-size:22px;

overflow:hidden;

color:#04486f !important;

}

.article-content {

overflow:hidden;

padding:18px;

font-family: Helvetica, Arial;

font-size: 16px;

letter-spacing: 0.1px;

color: #555;



}

.article-image {

margin:10px;

}

.article-content img{

max-width:80%;

}



.thumbnail {

    position: relative;

}







.caption {

    position: absolute;

    bottom: 1px;

    left: 5%;

    width: 70%;

    padding: -14px 5px -15px 15px;

    color: #000;

    font-size: 90%;

    background-color: rgba(255, 255, 255, 0.5);

}



.single-article {

padding:10px !important;

border-bottom:1px solid #eee;

}

.read-more {

margin-bottom:22px;

}

.read-more a {

font-family: 'Titillium Web', Arial;

font-weight:600;

font-size:18px;

}



/* Related News Widget */

.related-news {

background:#fff;

border:1px solid #e5e5e5;

border-radius:4px;

margin-bottom:20px;

box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.05)

}

.related-news h4{

margin:0;

padding:10px;

border-bottom:1px solid #eee;

font-family: 'Titillium Web', Arial;

font-weight:700;

font-size:17px;

overflow:hidden;

color:#ffffff;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

text-transform: uppercase;


background-color: #4682b4;

}

.related-news ul li{

height:60px;

margin:10px 0;

overflow:hidden;

}

.related-news ul li a{

font-family: 'Titillium Web', Arial;

font-weight:400;

font-size:15.5px;

}





/* Related News Widget 2 */

.related-news2 {

background:#fff;

border:1px solid #e5e5e5;

border-radius:4px;

margin-bottom:20px;

box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.05)

}

.related-news2 h4{

margin:0;

padding:10px;

border-bottom:1px solid #eee;

font-family: 'Roboto',arial;

font-weight:700;

font-size:17px;

overflow:hidden;

color:#156fa3;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

text-transform: uppercase;

background-color: #efeff0;

}

.related-news2 ul li{

height:60px;

margin:10px 0;

overflow:hidden;

}

.related-news2 ul li a{

font-family: 'Roboto', Arial;

font-weight:600;

font-size:16px;

color:#0053f9;

}









/* MISC CSS codes */

.max-width {

min-width:60%;

}

.article-meta {

padding:1px 0;

}

.article-meta span{

display:inline-block;

margin-right:10px;

font-family: 'Titillium Web', Arial;

font-weight:400;

font-size:13px;

color:#888;

}

.article-meta span i{

padding-right:5px;

color: #a2a0a0;

}

.article-meta span a{

color: #6c6b6b;

font-family: 'Titillium Web', Arial;

font-weight:400;

font-size:13px;

}

.widget {

margin-bottom:20px;

border-radius:4px;

box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.05)

}

.pagi {

border-top:2px solid #eee;

padding:0 10px 0 20px;

}

.not-found h1{

font-family: 'Titillium Web', Arial;

font-weight:700;

font-size:22px;

color:#555;

margin-bottom:10px;

}

.not-found p{

font-family: 'Titillium Web', Arial;

font-weight:400;

font-size:16px;

color:#999;

margin-bottom:10px;

}

.not-found {

margin:30px 0;

}

.content-ad {

margin-bottom:20px;

}

.clear {

clear:both;

}

.header {

margin:5px 0px;

}

.footer {

margin:20px 0;

padding:10px 0;

border-top:1px solid #ddd;

font-family: 'Titillium Web', Arial;

font-weight:400;

}

.install {

background:#fff;

border:1px solid #e5e5e5;

padding:10px;

margin-bottom:10px;

}

.install h4{

margin:0;

padding:0 10px 10px 10px;

border-bottom:1px solid #eee;

font-family: 'Titillium Web', Arial;

font-weight:700;

font-size:22px;

color:#666;

margin-bottom:10px;

}

.install-content {

padding:15px;

}

.install-content ul{

list-style:square;

}

.install-content ul li{

line-height:24px;

}

.install-content ul li i{

color:#ccc;

margin-right:5px;

}

.install-content ul li ul{

margin-left:20px;

list-style:none;

}

/* Additional CSS for Tab View */

@media only screen and (max-width: 992px) {

.logo {

text-align:center !important;

}

.logo a img{

margin:0 auto 10px auto !important;

}		

}

/* Additional CSS for Mobile View */

@media only screen and (max-width: 770px) {	

.logo {

text-align:center !important;

}

.logo a img{

margin:0 auto 10px auto !important;

}

.copyrights, .powered-by {

text-align:center;

margin-bottom:10px;

}

}

.facebook-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.facebook-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.cont {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


.cam {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 75%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe-cam {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


ol {
  /* remove the default styling for the list */
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  /* Initialize the counter */
  counter-reset: ingredients;
}

ol li {
  /* which counter to increment */
  counter-increment: ingredients;
  /* layout and spacing between the list items - unrelated to the custom counter stuff */
  margin-bottom: .1rem;
  display: flex;
  align-items: center;
  color: #4A4A4A;
}

ol li:before {
  /* this defines the content for the list item */
  content: counter(ingredients);
  /* these are the custom styles I'm applying to them */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #8db3d2;
  color: #ffffff;
  padding: 1rem;
  border-radius: 42px;
  height: 32px;
  width: 32px;
  font-size: 2rem;
  font-weight: 700;
  margin-right: .75rem;
}

ol.secondary {
  /* remove the default styling for the list */
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  /* Initialize the counter */
  counter-reset: ingredients;
}

ol.secondary li {
  /* which counter to increment */
  counter-increment: ingredients;
  /* layout and spacing between the list items - unrelated to the custom counter stuff */
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  color: #4A4A4A;
}

ol.secondary li:before {
  /* this defines the content for the list item */
  content: counter(ingredients);
  /* these are the custom styles I'm applying to them */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(94, 126, 153, 0.44);
  color: #ffffff;
  padding: 1rem;
  border-radius: 38px;
  height: 28px;
  width: 28px;
  font-size: 1.5rem;
  font-weight: 700;
  margin-right: .75rem;
}