424 lines
18 KiB
CSS
424 lines
18 KiB
CSS
/*-----------------------------------------------------------------------------------
|
|
|
|
CSS Name: CGTnews over Hashnews - Modern Magazine & Newspaper HTML Template
|
|
Description: CGTnews
|
|
Author: Estudio Nexos
|
|
Author URI: https://www.estudionexos.com/
|
|
Version: 1.0
|
|
-----------------------------------------------------------------------------------*/
|
|
/*----------------------------------------*/
|
|
/* 1. Theme default CSS
|
|
/*----------------------------------------*/
|
|
/*-- Colors --*/
|
|
/* maincolor = '#b4061b'
|
|
highlight1 = '#b4061b'
|
|
highlight1hover = '#8d0801'
|
|
highlight2 = '#b4061b'
|
|
bgdark = '#001427'
|
|
bgdarkhover = '#002548'
|
|
/*--
|
|
Sections colors
|
|
-----------------------------------------*/
|
|
/*
|
|
dark-red = #d40000 //accion sindical
|
|
dark-brown = #986601 //agitacion
|
|
light-brown = #ae906d //confederacion
|
|
dark-green = #029502 //sin fronteras
|
|
light-green = #339900 //cultura libre
|
|
violet = #a54bff //eje violeta
|
|
dark-blue = #0147d1 //ideas
|
|
*/
|
|
/*-- Fonts --*/
|
|
@font-face {
|
|
font-family: "AvenirBold";
|
|
src: url(/wp-content/themes/ryn/src/fonts/AvenirNextLTPro-Bold.otf);
|
|
font-weight:600;
|
|
}
|
|
@font-face {
|
|
font-family: "AvenirRegular";
|
|
src: url(/wp-content/themes/ryn/src/fonts/AvenirNextLTPro-Regular.otf);
|
|
font-weight:600;
|
|
}
|
|
/*-- Google Font --*/
|
|
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
|
|
/*-- Common Style --*/
|
|
body { font-family: "AvenirRegular", "Roboto", sans-serif; background-color:#f5f5f5; font-weight:400; }
|
|
h1, h2, h3, h4, h5, h6 { font-family: "AvenirBold", "Roboto", sans-serif; }
|
|
ul { list-style: square outside none; margin: 0px; padding: 0 0 0px 20px; }
|
|
ul.sub-menu, ul.sub-menu ul, ul.breaking-news-ticker { list-style: none; margin: 0px; padding: 0px; }
|
|
|
|
.bg-dark { background-color: #001427 !important; }
|
|
.text-danger { color: #b4061b; }
|
|
.badge-danger { background-color: #b4061b; }
|
|
a { color:#001427; }
|
|
a:hover { text-decoration: none; color: #d40000; }
|
|
|
|
/*-- --
|
|
Scroll Up
|
|
-----------------------------------------*/
|
|
#scrollUp { background-color: #b4061b; }
|
|
|
|
/*--
|
|
Youtube Video PlayList
|
|
-----------------------------------------*/
|
|
.RYPP { padding: 18px 18px 100px 18px; }
|
|
.RYPP .RYPP-playlist { height: 75px; }
|
|
|
|
.playlist { background-color: #000; }
|
|
|
|
/*--
|
|
Page Banner
|
|
-----------------------------------------*/
|
|
/*-- Page Banner --*/
|
|
.page-banner { padding: 30px 0px 0px; }
|
|
@media only screen and (min-width: 992px) and (max-width: 1200px) { .page-banner { padding: 20px 0px 0px; } }
|
|
@media only screen and (min-width: 768px) and (max-width: 991px) { .page-banner { padding: 20px 0px 0px; } }
|
|
@media only screen and (max-width: 767px) { .page-banner { padding: 20px 0px 0px; } }
|
|
.page-banner h2 { color: #000; text-transform: none; }
|
|
|
|
/*--
|
|
Instagram Carousel
|
|
-----------------------------------------*/
|
|
.instagram-carousel .video.instagram-item::before { content: "\f03d"; }
|
|
.instagram-carousel .galeria.instagram-item::before { content: "\f03e"; }
|
|
.instagram-carousel .publicacion.instagram-item::before { content: "\f0f6"; color:#666; }
|
|
|
|
/*--
|
|
Blockquote
|
|
-----------------------------------------*/
|
|
blockquote { text-align: left; background-color: #ccc; color: #000; position: relative; overflow: hidden; width: 100%; float: left; padding: 35px 35px 10px 80px; }
|
|
blockquote::before { font-family: 'Fontawesome'; content: "\f10d"; position: absolute; left: -2px; top: 3px; font-size: 60px; color: #ffffff; }
|
|
|
|
/*--
|
|
Background color
|
|
-----------------------------------------*/
|
|
/*
|
|
.bg-red { background-color: #b4061b; }
|
|
*/
|
|
.bg-red { background-color: #f05555; }
|
|
.bg-red .post-block-wrapper { background-color: #f69e9e; }
|
|
|
|
|
|
/*----------------------------------------*/
|
|
/* 2. Header
|
|
/*----------------------------------------*/
|
|
/*----
|
|
Header Section
|
|
------------------------------------------*/
|
|
.header-section { background-color: #ffffff; }
|
|
@media only screen and (min-width: 777px) {
|
|
.header-logo .logo { float:right; }
|
|
.header-section {
|
|
background-image: url("/wp-content/themes/ryn/src/img/g4841.png");
|
|
background-position: top right;
|
|
background-repeat: no-repeat;
|
|
background-size: 85px auto;
|
|
}
|
|
.header-banner { text-align:left; }
|
|
}
|
|
@media only screen and (min-width: 777px) and (max-width: 1024px) {
|
|
.header-section {
|
|
padding:10px 0;
|
|
background-size: 90px auto;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 741px) and (max-width: 777px) {
|
|
.header-section { background-image:none; }
|
|
.header-banner { line-height: 20px; }
|
|
}
|
|
@media only screen and (max-width: 740px) {
|
|
.header-top-links ul.header-links { padding:0px; float:none; width:65%; margin:0 auto; text-align:center;}
|
|
.header-top-links .header-links li::before { background-color: transparent; }
|
|
.header-top-social { text-align:center; }
|
|
.header-top-social .header-social { float:none; }
|
|
.header-top-social .header-social a { display:inline; float:none; }
|
|
.header-section { display:none; }
|
|
}
|
|
/*-- Header Logo --*/
|
|
/*
|
|
.header-logo .logo img { height:100px; }
|
|
*/
|
|
|
|
/*-- Header Banner --*/
|
|
.header-banner .banner a img { max-width:auto; width:auto; }
|
|
|
|
/*----
|
|
Menu Section
|
|
------------------------------------------*/
|
|
/*-- Main Menu --*/
|
|
.main-menu nav > ul > li.active > a,
|
|
.main-menu nav > ul > li:hover > a { color: #b4061b; }
|
|
|
|
/*-- Sub Menu --*/
|
|
.sub-menu li.active a, .sub-menu li:hover a, .sub-menu li a:hover { color: #b4061b; }
|
|
|
|
.sub-sub-menu { border-top: 1px solid #f1f1f1; }
|
|
.sub-sub-menu li { padding-left: 10px }
|
|
.sub-menu li:hover .sub-sub-menu li a { color: #666666; }
|
|
.sub-menu li:hover .sub-sub-menu li a:hover { color:red; }
|
|
|
|
/*----
|
|
Header Top
|
|
------------------------------------------*/
|
|
.header-top-links .header-links li.disabled a { background-color: #f05555; }
|
|
.header-top-links .header-links li a:hover { color: #b4061b; }
|
|
.header-top-social .header-social a:hover {color: #b4061b;}
|
|
|
|
/*--
|
|
Breaking News Section
|
|
------------------------------------------*/
|
|
.breaking-news-section { background-color: #b4061b; /*-- Breaking News Section Two --*/ /*-- Breaking News Section Three --*/ }
|
|
.breaking-news-wrapper .breaking-news-nav button { background-color: red; /*-- Hover --*/ }
|
|
|
|
/*-- Breaking News Wrapper --*/
|
|
.breaking-news-wrapper .breaking-news-ticker li a { font-family: "Roboto", sans-serif; }
|
|
|
|
|
|
/*----------------------------------------*/
|
|
/* 3. Post Common Style For Post Block, Carousel & Nav Etc
|
|
/*----------------------------------------*/
|
|
/*-- Popular Section --*/
|
|
.single-publicacion .popular-section { background-color: #1f2024; }
|
|
.popular-section .popular-section-title { align-self:center; }
|
|
.popular-section h2.title { text-align:center; text-transform:uppercase; font-size:18px; font-weight:600; color:#fff; margin:auto 0px; }
|
|
|
|
/*-- Post Block Wrapper --*/
|
|
.post-block-wrapper { border: 1px solid #f1f1f1; background-color: #ffffff; }
|
|
|
|
.single-galeria .post-block-wrapper.post-content,
|
|
.single-video .post-block-wrapper.post-content,
|
|
.single-publicacion .post-block-wrapper.post-content,
|
|
.single-audio .post-block-wrapper.post-content { border: none; }
|
|
|
|
.post-header .teaser,
|
|
.single-video .teaser,
|
|
.single-publicacion .teaser,
|
|
.single-audio .teaser { color:#fff; }
|
|
@media only screen and (min-width: 992px) {
|
|
.single-video .teaser { position:absolute; bottom:30px; font-size:18px; }
|
|
.post-header .teaser,
|
|
.single-audio .teaser { font-size:16px; }
|
|
.single-publicacion .teaser { font-size:18px; }
|
|
}
|
|
|
|
.post-block-wrapper .head { border-bottom: 3px solid #f1f1f1; }
|
|
.post-block-wrapper.dark-red .head { border-bottom: 3px solid #d40000; }
|
|
.post-block-wrapper.dark-green .head { border-bottom: 3px solid #029502; }
|
|
.post-block-wrapper.light-green .head { border-bottom: 3px solid #339900; }
|
|
.post-block-wrapper.dark-brown .head { border-bottom: 3px solid #986601; }
|
|
.post-block-wrapper.light-brown .head { border-bottom: 3px solid #ae906d; }
|
|
.post-block-wrapper.violet .head { border-bottom: 3px solid #a54bff; }
|
|
/*
|
|
.post-block-wrapper.violet .head { background: linear-gradient(to left, #fff, #a54bff); border-bottom: 3px solid #fff; }
|
|
*/
|
|
.post-block-wrapper.dark-blue .head { border-bottom: 3px solid #0147d1; }
|
|
|
|
.post-block-wrapper.violet { background-color:#a54bff; color:#f5f5f5; }
|
|
.post-block-wrapper.violet .head { border-bottom: 3px solid #f1f1f1; }
|
|
.post-block-wrapper.violet a { color:#fff; }
|
|
.post-block-wrapper.violet a:hover { color:#d40000; }
|
|
|
|
.post-block-wrapper.bg-dark a { color:#f1f1f1; }
|
|
.post-block-wrapper.bg-dark a:hover { color:#d40000; }
|
|
|
|
.post-block-wrapper .head h2,
|
|
.post-block-wrapper .head h3 { font-size: 18px; line-height: 24px; }
|
|
|
|
.post-block-wrapper .head::before, .post-block-wrapper .head::after { background-color: #b4061b; }
|
|
.post-block-wrapper .head .title { color: #b4061b; }
|
|
.post-block-wrapper .head .post-block-tab-list > li > a { font-family: "AvenirRegular","Roboto", sans-serif; font-weight: bold; }
|
|
.post-block-wrapper .head .post-block-tab-list > li .dropdown-menu li a { font-family: "Roboto", sans-serif; }
|
|
|
|
.post-block-wrapper .head .post-block-tab-list.feature-post-tab-list > li > a:hover,
|
|
.post-block-wrapper .head .post-block-tab-list.feature-post-tab-list > li > a.active { color: #b4061b; }
|
|
.post-block-wrapper.dark-red .head .post-block-tab-list.feature-post-tab-list > li > a:hover,
|
|
.post-block-wrapper.dark-red .head .post-block-tab-list.feature-post-tab-list > li > a.active { color: #d40000; }
|
|
.post-block-wrapper.dark-blue .head .post-block-tab-list.feature-post-tab-list > li > a:hover,
|
|
.post-block-wrapper.dark-blue .head .post-block-tab-list.feature-post-tab-list > li > a.active { color: #0147d1; }
|
|
|
|
.post-block-wrapper .head .post-block-tab-list.feature-post-tab-list > li .dropdown-menu li a:hover,
|
|
.post-block-wrapper .head .post-block-tab-list.feature-post-tab-list > li .dropdown-menu li a.active { color: red; }
|
|
|
|
.post-block-wrapper .body .single-post .content { font-size:18px; line-height: 28px; }
|
|
|
|
.post-carousel-1 .slick-arrow { background-color: #000; color:#fff; }
|
|
/*
|
|
.post-block-carousel .slick-arrow:hover { color: #b4061b; border-color: #b4061b; }
|
|
*/
|
|
|
|
.page-pagination ul li a { width:auto; min-width:30px; }
|
|
|
|
/*----------------------------------------*/
|
|
/* 4. Post Styles
|
|
/*----------------------------------------*/
|
|
.post .post-wrap .category { font-family: "Roboto", sans-serif; }
|
|
.post .post-wrap .content .title { font-size: 22px; line-height: 24px; }
|
|
@media only screen and (min-width: 992px) and (max-width: 1200px) { .post .post-wrap .content .title { font-size: 20px; } }
|
|
@media only screen and (max-width: 479px) { .post .post-wrap .content .title { font-size: 14px; line-height: 18px; } }
|
|
.post.post-small .post-wrap .content .title { font-size: 16px; line-height: 18px; }
|
|
@media only screen and (min-width: 992px) and (max-width: 1200px) { .post.post-small .post-wrap .content .title { font-size: 12px; line-height: 16px; } }
|
|
.post.post-large .post-wrap .content .title { font-size: 32px; line-height: 36px; }
|
|
@media only screen and (min-width: 992px) and (max-width: 1200px) { .post.post-large .post-wrap .title { font-size: 28px; line-height: 32px; } }
|
|
@media only screen and (max-width: 767px) { .post.post-large .post-wrap .content .title { font-size: 24px; line-height: 30px; } }
|
|
@media only screen and (max-width: 479px) { .post.post-large .post-wrap .content .title { font-size: 14px; line-height: 18px; } }
|
|
.post .post-wrap .content .title a:hover { color: #b4061b; }
|
|
.post .post-wrap .content .meta .meta-item.date { font-size:0.8rem; }
|
|
.post .post-wrap .content .meta .meta-item.date.event { font-size:0.9rem; line-height:1.3rem; font-family:"AvenirBold", Roboto, sans-serif; }
|
|
.post .post-wrap .content .meta .meta-item i { line-height:18px; }
|
|
|
|
.post-header .meta .meta-item.author i { color:#17a2b8; }
|
|
|
|
.post-header .meta .meta-item.category.politic { background-color: #b4061b; }
|
|
.post-header .meta .meta-item.category.politic:hover { background-color:#8d0801; }
|
|
.post-header .meta .meta-item i { color: /*#b4061b*/#bbb; }
|
|
|
|
.post.post-overlay.post-large .content { left:50px; right:50px; }
|
|
|
|
.post.post-overlay .post-wrap .category { position: static; left: auto; top: auto; float:left; margin-right:3px; }
|
|
.post.post-overlay .post-wrap .categories { position: absolute; left: 3px; top: 3px; z-index:100; }
|
|
|
|
/*----------------------------------------*/
|
|
/* 5. Single Post Details
|
|
/*----------------------------------------*/
|
|
/*-- Post Header --*/
|
|
.post-header { padding: 50px 30px; background-color: rgba(98, 28, 28, 0.65) }
|
|
.post-header .title { font-size: 3rem; line-height: 4rem; font-weight: 700; }
|
|
@media only screen and (min-width: 992px) and (max-width: 1200px) { .post-header .title { font-size: 28px; line-height: 32px; } }
|
|
@media only screen and (max-width: 767px) { .post-header .title { font-size: 24px; line-height: 30px; } }
|
|
@media only screen and (max-width: 479px) { .post-header .title { font-size: 18px; line-height: 24px; } }
|
|
.post-header-section { box-shadow: 0 16px 32px 0 rgba(52,58,64,.24); }
|
|
|
|
@media only screen and (max-width: 767px) { .post-header { padding-bottom: 40px; } }
|
|
.post-header .meta .meta-item { font-family: "AvenirRegular","Roboto", sans-serif; }
|
|
.post-header .meta .meta-item.category { margin-right:5px; border-radius:0px; }
|
|
|
|
/*-- Single Post --*/
|
|
.single-post .post-wrap .content p { margin-bottom: 30px; display: block; float: none; }
|
|
.single-post .post-wrap .content p:first-child { font-family: "AvenirBold", "Roboto"; font-weight:bold; line-height: 24px; font-size: 18px; }
|
|
.single-blog .blog-wrap .meta .meta-item.category { margin-right:5px; }
|
|
|
|
/*-- Single post Publicacion --*/
|
|
.single-publicacion .post-content .post-header { padding: 30px 0px 10px; background-color:transparent; }
|
|
.single-publicacion .post-header .meta .meta-item { color:#666; }
|
|
.single-publicacion .post-header .meta .meta-item.category { color:#fff; }
|
|
.single-publicacion .post-header .title { color: #000; }
|
|
|
|
/*----------------------------------------*/
|
|
/* 6. Blog & Blog Details
|
|
/*----------------------------------------*/
|
|
/*-- Single Post --*/
|
|
.single-blog .blog-wrap .meta .meta-item { font-family:"AvenirRegular","Roboto", sans-serif; }
|
|
|
|
/*----------------------------------------*/
|
|
/* 7. Sidebar
|
|
/*----------------------------------------*/
|
|
/*-- Sidebar Block Wrapper --*/
|
|
.sidebar-block-wrapper .head::before, .sidebar-block-wrapper .head::after { background-color: #b4061b; }
|
|
.sidebar-block-wrapper .head .title { color: #b4061b; }
|
|
|
|
/*-- Sidebar Social Follow --*/
|
|
.sidebar-social-follow > div { padding: 1px; width: 33%; float: left; }
|
|
|
|
/*-- Sidebar Tab List For Latest & Popular News --*/
|
|
.sidebar-tab-list a { font-family: "AvenirRegular","Roboto", sans-serif; }
|
|
.sidebar-tab-list.sidebar-tab-list-3-tabs a { width: 33.33%; }
|
|
.sidebar-tab-list.sidebar-tab-list-3-tabs a:last-child::after { right: -1.1px; }
|
|
.sidebar-tab-list a::before,
|
|
.sidebar-tab-list a::after,
|
|
.sidebar-tab-list a.active { background-color: #b4061b; }
|
|
|
|
/*-- Sidebar Category --*/
|
|
.sidebar-category li a { font-family: "AvenirRegular","Roboto", sans-serif; }
|
|
|
|
/*----------------------------------------*/
|
|
/* 8. Contact
|
|
/*----------------------------------------*/
|
|
|
|
/*-- Contact Form --*/
|
|
.contact-form input[type="checkbox"] { width: auto; height: auto; border: 1px solid #f1f1f1; line-height: 24px; padding: 7px 15px; }
|
|
.contact-form button[type="submit"] { width: auto; border-radius: 5px; background-color: #00c8fa; color: #ffffff; text-transform: capitalize; border: none; padding: 8px 30px; }
|
|
.contact-form legend { display: block; line-height: 18px; font-size:14px; font-weight:600; }
|
|
|
|
.contact-form button[type="submit"]:focus { border: none; }
|
|
|
|
/*----------------------------------------*/
|
|
/* 9. Footer
|
|
/*----------------------------------------*/
|
|
/*--
|
|
Footer Top
|
|
----------------------------------------*/
|
|
/*-- Footer Widget --*/
|
|
.footer-widget .widget-title { border-left: 4px solid #b4061b; }
|
|
.footer-widget .widget-title { font-family: "AvenirRegular","Roboto", sans-serif; }
|
|
.footer-widget .footer-widget-post .post-wrap .content .meta .meta-item { font-family: "AvenirRegular","Roboto", sans-serif; }
|
|
.footer-widget .single-tweet .content .head h5 { font-family: "AvenirRegular","Roboto", sans-serif; }
|
|
.footer-top-section a, .footer-bottom-section a {color:#fff; }
|
|
|
|
.footer-widget .content .footer-social a.rss { background-color: orange; }
|
|
|
|
.not-front .footer-widget .content .footer-social a { width: 56px; height: 56px; border-radius: 3px; text-align: center; color: #ffffff; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); }
|
|
.not-front .footer-widget .content .footer-social a i { font-size: 28px; line-height: 58px; }
|
|
|
|
|
|
/*----------------------------------------*/
|
|
/* 10. Extra CSS
|
|
/*----------------------------------------*/
|
|
/*--
|
|
Masonry
|
|
----------------------------------------*/
|
|
|
|
.grid-sizer,
|
|
.grid-item { float:left; width: 100%; margin-bottom: 10px;}
|
|
.grid-item--width2 { width:100%; }
|
|
.grid-item img { max-width:100%; }
|
|
|
|
@media only screen and (min-width: 1501px) {
|
|
.grid-sizer,
|
|
.grid-item { float:left; width: 16.1%;}
|
|
.grid-item--width2 { width: 49.5%; }
|
|
.grid-item img { max-width:100%; }
|
|
}
|
|
|
|
@media only screen and (min-width: 1370px) and (max-width: 1500px) {
|
|
.grid-sizer,
|
|
.grid-item { float:left; width: 16.05%;}
|
|
.grid-item--width2 { width: 49.4%; }
|
|
}
|
|
|
|
@media only screen and (min-width: 1274px) and (max-width: 1369px) {
|
|
.grid-sizer,
|
|
.grid-item { float:left; width: 16%;}
|
|
.grid-item--width2 { width: 49.3%; }
|
|
}
|
|
|
|
@media only screen and (min-width: 1185px) and (max-width: 1273px) {
|
|
.grid-sizer,
|
|
.grid-item { float:left; width: 15.95%;}
|
|
.grid-item--width2 { width: 49.3%; }
|
|
}
|
|
|
|
@media only screen and (min-width: 1050px) and (max-width: 1184px) {
|
|
.grid-sizer,
|
|
.grid-item { float:left; width: 15.85%;}
|
|
.grid-item--width2 { width: 49.25%; }
|
|
}
|
|
|
|
@media only screen and (min-width: 955px) and (max-width: 1049px) {
|
|
.grid-sizer,
|
|
.grid-item { float:left; width: 24.2%;}
|
|
.grid-item--width2 { width: 49.3%; }
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 860px) and (max-width: 954px) {
|
|
.grid-sizer,
|
|
.grid-item { float:left; width: 24.1%;}
|
|
.grid-item--width2 { width: 49.3%; }
|
|
}
|
|
|
|
@media only screen and (min-width: 650px) and (max-width: 859px) {
|
|
.grid-sizer,
|
|
.grid-item { float:left; width: 49%;}
|
|
.grid-item--width2 { width: 49%; }
|
|
}
|