Giao diện website của bạn thấy không được ổn, bạn muốn sửa lại điều chỉnh lại kích thước, màu sắc, cân lề lại… tất cả những thuộc tính đó bạn đều phải sử dụng đến css, bạn phải can thiệp bằng các đoạn code, bài viết trước mình có hướng dẫn các thuộc tính cơ bản trong css cần nắm cho người làm code bạn có thể tham khảo. Bài viết hôm nay mình giới thiệu thêm cách thêm css ngay trong theme wordpress mà mỗi khi làm web bạn thường hay sử dụng.

1/ Chỉnh sửa font chữ cho bài viết 

Khi bạn điều chỉnh font-size cho các thẻ h1 – h6 trong mỗi bài viết, có một số theme bạn sẽ dễ dàng sửa ngay trên table điều khiển, tuy nhiên nhiều theme sẽ không có, do vậy bạn phải view code để chỉnh sửa, hoặc bạn có thể chuyển qua tab text để thêm đoạn code như sau:

<h1><span style="font-size: 18px;"><strong>1/ Tiêu đề 1 </strong></span></h1>
<h2><span style="font-size: 18px;"><strong>2/ Tiêu đề 2 </strong></span></h1>
<h3><span style="font-size: 18px;"><strong>3/ Tiêu đề 3 </strong></span></h3>

2/ Chèn table bằng css trong page/post

Một table gồm 1 dòng, 2 cột, và giá trị của từng ô thì sẽ có cấu trúc thẻ như sau: <table> -> <tr> – > <td> -> <p> tương ứng với bao nhiêu thẻ tr tương ứng bây nhiêu dòng, bao nhiêu thẻ td ứng với bây nhiêu cột, thẻ p chính là giá trị của ô đó.

<table style="box-sizing: border-box; border-spacing: 0px; border-collapse: collapse; background-color: #ffffff; border: medium; width: 100%; color: #101010; font-family: 'Myriad Pro', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; margin: 0px; height: 276px;" border="1" width="642" cellspacing="0" cellpadding="0">
<tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box; height: 32.7pt;">
<td style="box-sizing: border-box; padding: 0cm 5.4pt; margin: 0px; border: 1px solid #000000; width: 141.5pt; height: 32.2pt; background-color: transparent;" valign="top">
<p style="box-sizing: border-box; margin: 0cm 0cm 18.75pt; vertical-align: baseline;"><strong style="box-sizing: border-box; font-weight: bold;"><span style="box-sizing: border-box; margin: 0px; color: #333333; font-family: Arial; font-size: 16px;">Vị trí</span></strong></p>
</td>
<td style="box-sizing: border-box; padding: 0cm 5.4pt; border-width: 1px 1px 1px 0px; border-style: solid solid solid none; border-color: #000000; margin: 0px; border-image: none 100% / 1 / 0 stretch; width: 7cm; height: 32.2pt; background-color: transparent;" valign="top">
<p style="box-sizing: border-box; margin: 0cm 0cm 18.75pt; vertical-align: baseline;"><span style="box-sizing: border-box; font-family: Arial; font-size: 16px;"><strong style="box-sizing: border-box; font-weight: bold;"><span style="box-sizing: border-box; margin: 0px; color: #333333;">Đơn vị</span></strong></span></p>
</td>
</tr>
</tbody>
</table>

Ví dụ:

Vị trí 1

Vị trí 2

Vị trí 3

Vị trí 4

Mô tả 1

Mô tả 2

Mô tả 3

Mô tả 4

Ngoài ra, đôi khi bạn cần kẻ những bảng phức tạp hơn, chẳng hạn như cần trọn 2 dòng thành 1 ô, hoặc 3 ô thành 1 ô theo chiều ngang, hoặc 4 ô thanh 1 ô theo chiều dọc thì bạn chỉ cần thẻ sau vào trong thẻ td mà thôi. rowspan=”2″ // trộn 2 ô trên 1 cột, chèn trong thẻ td colspan=”3″ // trộn 3 ô trên 1 dòng, chèn trong thẻ td Ví dụ 1 table này để các bạn thấy nhé. <figure class="wp-block-table"><table><tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td rowspan="2"></td> <td colspan="3"></td> </tr> <tr> <td></td> <td></td> </tr> </tbody></table></figure> Khi hiễn thị nó sẽ thành thế này:

       
     
     

3/ Chỉnh sửa các dòng cột, dòng trong wordpress bằng css

Bất kỳ theme nào, bạn cũng có thể lựa chọn để chỉnh sửa lại css mà mình mong muốn, do đó sau khi bạn cài đặt theme wordpress bạn sẽ thấy có phần CSS bổ sung, tại đây bạn có thể viết thêm css, ví dụ bạn muốn sửa vị trí nào thì bạn gọi vị trí đó ra bằng cách gõ như một số đoạn code dưới đây.

.fb_dialog, .fb_reset {position: fixed !important;z-index: 10000 !important;}
.fb_dialog {
right:30pt !important;
}

.module {
margin-bottom: 50px;
}

.top-bar ul ul li a {
text-transform: unset;
}

.top-bar ul li a {
text-transform: unset;
font-size: 1.1rem;
}

#home-page__3-boxes h3{
text-transform:unset;
text-align: left;
}

#home-page__3-boxes .button{
text-transform:unset;
}

#home-page__3-boxes .information-boxes h3 {
text-align: left;
}

.information-boxes h3, .information-boxes ul,
.information-boxes p{
color: #333;
}

.home-page__box {
width: calc(100% - 30px);
padding: 15px;
margin-top: -40px;
position: relative;
margin-left: 15px;
}

.section-title h2 {
text-transform:unset;
margin-bottom: 8px;
}

#home-page-partner .thumbnail {
height: 100%;
width: 100% !important;
}

.footerbottom .right-side{
content: url('https://hiu.vn/Resources/Images/HomePage/footer/LogoNHG.png');
display: block;
width: 220px;
}

.top-bar .dropdown.menu>li.opens-right>.is-dropdown-submenu li a:before {
content: "";
}

.divider_line2 i {
width: 40px;
height: 40px;
background-color: #333;
line-height: 40px;
}

.sinh-vien-quoc-te__desc {
padding-top: 10% !important;
padding-left: 24px !important;
width: 85% !important;
}

.sinh-vien-quoc-te__icon {
text-align: right;
font-size: 32px;
color: black;
width: 15% !important;
}

#ban-giam-hieu .staff-detail a, #ban-giam-hieu .staff-box a{
pointer-events: none;
}

#ban-giam-hieu .staff-links a{
pointer-events: inherit;
}

.footer-widget .menu li {
width: 100%;
}

.title-section {
background-color: transparent;
color: black;
}

.title-section .row {
width: 50%;
background: rgba(99, 99, 99, 0.60);
margin-left: 10%;
padding-top: 8px;
padding-bottom: 8px;
}

.title-section h1 {
text-transform:none;
}

.breadcrumbs li {
text-transform: none;
font-size: 0.8rem;
}
.breadcrumbs li a {
font-size: 0.8rem;
}

#responsive-menu > ul > li:nth-child(1) > ul {
min-width: 260px;
}

#responsive-menu > ul > li:nth-child(2) > ul {
min-width: 220px;
}

#responsive-menu > ul > li:nth-child(3) > ul {
min-width: 300px;
}

#responsive-menu > ul > li:nth-child(1) > ul > li.is-dropdown-submenu-parent.is-submenu-item.is-dropdown-submenu-item.opens-right > ul {
min-width: 115px;
}

.event {
height: 292px;
}

.event-data {
margin-bottom: 40px !important;
}

.event h4 a {
text-transform: none;
}

.seminar-events {
display: none;
}

.call-to-action, .event .button {
display: none;
}

.has-post-thumbnail .featured-image, .post-meta {
display: none;
}

.post-title-alt a {
font-size: 16px !important;
text-transform: none;
}

#top {
right: 5px;
bottom: 5px;
}

#so-do-trang-web .wshs-post-simple-list h2 {
display: none;
}

#so-do-trang-web .wshs-post-simple-list li {
padding-left: 4px;
}

#khoi-nganh-dao-tao .bran-logo .thumbnail {
height: 100%;
width: 100% !important;
}

.khoi-nganh-dao-tao__ten-khoi {
margin-top: -50px;
position: relative;
color: white;
text-align: center;
font-weight: 700;
background: rgba(58,52,42,.7);
height: 50px;
padding-top: 10px
}

@media only screen and (max-width: 600px) {
#home-page__huong-nghiep .kc-call-to-action {
width: 100%;
}

.title-section .row {
width: 90%;
}
}

4/ Các đoạn code css quan trọng trong theme wordpress Trong một theme wordpress bất kỳ chúng ta cũng đều cần phải viết css cho các dòng, cột, các thuộc tin quan trọng mà sử dụng nhiều nhất mà các bạn cần nhớ đó là font-family, font-size, line-height, font-weight, padding, margin, font-style, color…. Ví dụ: bạn muốn viết css cho body với các thuộc tín cơ bản như bên dưới.

body {
font-family:'Lato', sans-serif;
line-height:1.7;
font-size:1rem;
font-weight:400;
padding:0;
margin:0;
font-style:normal;
color:#5d5d5d;
}
h1,
h1 a {
font-size:2rem;
margin-bottom:15px;
}
h2,
h2 a {
font-size:1.75rem;
}
h3,
h3 a {
font-size:1.50rem;
}
h4,
h4 a {
font-size:1.25rem;
}
h5,
h6,
h5 a,
h6 a {
font-size:1rem;
}
label,
p,
ul,
ol,
a,
blockquote,
input,
textarea,
select,
[type=date],
[type=text],
[type=email],
span {
font-size:1rem;
line-height:1.7;
color:#5d5d5d;
}
[type=color],
[type=date],
[type=datetime-local],
[type=datetime],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
textarea {
height:2.53022rem;
}
.select2-container .select2-choice {
padding-top:6px;
padding-bottom:6px;
height:2.53022rem;
}
h1,
h2,
h3,
h4,
h5,
h6,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
font-family:'Montserrat', sans-serif;
font-weight:bold;
color:#2f2f2f;
}
a:hover {
color:#e79800;
}
iframe {
width:100%;
border:0px;
}
.wp-block-button__link,
.button {
text-transform:uppercase;
font-weight:bold;
font-family:'Montserrat', sans-serif;
}
.wp-block-button__link,
.button.primary {
background-color:#174873;
}
.wp-block-button__link:hover,
.button.primary:hover {
background-color:#e79800;
}
.button.secondary {
background-color:#e79800;
}
.button.secondary:hover {
background-color:#174873;
}
.bordered-light {
background-color:transparent !important;
border:1px solid #FFF;
}
.bordered-light:hover {
background-color:#e79800 !important;
border-color:#e79800 !important;
}
.bordered-dark {
background-color:transparent !important;
border:1px solid #2f2f2f !important;
color:#2f2f2f !important;
}
.bordered-dark:hover {
background-color:#2f2f2f !important;
border-color:#2f2f2f !important;
color:#FFF !important;
}
.module {
position:relative;
margin-bottom:100px;
}
dl dt {
font-weight:bold;
margin-bottom:.3rem;
}
iframe {
width:100%;
}
.small-spacer {
margin-top:40px;
}
.moduled-page::after {
content:" ";
display:table;
clear:both;
}
.gallery-container .item-grid img {
padding:2px;
}

/*————————- 01.1 WordPress Generated Default Style – Chỉnh sửa style css mặc định của page ————————-*/

.aligncenter {
display: block;
margin: 0 auto;
}
.alignright {
float: right;
margin: 0 0 10px 20px;
}
.alignleft {
float: left;
margin: 0 20px 10px 0;
}
.floatleftcenter {
float: none;
margin: 0 auto;
}
.floatleft {
float: left
}
.floatright {
float: right
}
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
max-width: 100%;
height: auto;
}
.wp-caption,
.gallery-caption {
text-align: center;
max-width: 100%;
border: 1px solid #ededed;
background-color: #fff;
padding: 8px;
}
.wp-caption img {
display: block;
margin: 0 auto;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 0.875em;
padding: 10px 0 0;
margin: 0;
text-align: center;
}
.wp-caption.alignnone {
margin-bottom: 20px
}
.wp-smiley {
margin: 0;
max-height: 1em;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 0px;
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.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
.bypostauthor {
line-height:25px;
}
#img-attch-page {
text-align: center;
overflow: hidden;
}
#img-attch-page img {
display: inline-block;
margin: 0 auto;
max-width: 100%;
margin-bottom: 20px;
}
.post-password-form label,
.post-password-form input {
display: block;
float: none;
}
.post-password-form input {
margin-top: 10px
}
.post-password-form input[type="password"] {
width: 200px;
max-width: 100%;
}
.post-password-form label {
font-weight: 600;
color: #000;
}
form.login {
padding: 20px;
border: 1px solid #ededed;
}
form.login .lost_password {
margin-left: 20px;
display: inline-block;
}
.wpstats {
display: none
}
.tagcloud a {
padding: 10px 5px;
white-space: nowrap;
margin: 5px;
display: block;
line-height: 1px;
float: left;
}
.tagcloud a {
background-color: #EAEAEA;
}
.tagcloud a:hover {
background-color:#2f2f2f;
color:#FFF;
}
.product_meta::after,
.widget::after {
clear:both;
content:"";
display:table;
}

/*————————- 01.2 WordPress Default Widgets Style – chỉnh sửa css cho widget ————————-*/

.widget .search_field {
margin-bottom:0px;
}
.widget table tfoot td,
.widget table tfoot th,
.widget table thead td,
.widget table thead th,
.widget table tbody td,
.widget table tbody th {
padding: .5rem 0.4rem .625rem;
}
.widget table {
margin-bottom:0px;
}
.footer-widget table tbody,
.footer-widget table tfoot,
.footer-widget table thead,
.footer-widget table tbody tr:nth-child(even) {
background-color:transparent;
}
.footer-widget table tfoot,
.footer-widget table thead {
color:#FFF;
}
.footer-widget .tagcloud a {
color:#2f2f2f;
}
.footer-widget .tagcloud a:hover {
color:#FFF;
}
.transparent-background,
.grey-bg {
display: block;
position: relative;
padding-top:100px;
padding-bottom:100px;
}
.grey-bg {
background-color:#F7F7F7;
border-top:1px solid #ededed;
border-bottom:1px solid #ededed;
}
.transparent-background h1,
.transparent-background h2,
.transparent-background h3,
.transparent-background h4,
.transparent-background h5,
.transparent-background h6,
.transparent-background a,
.transparent-background p,
.transparent-background p strong,
.transparent-background blockquote,
.transparent-background cite,
.transparent-background .tabs-content .is-active a {
color:#FFF !important;
}
.transparent-background .accordion-item a,
.transparent-background .event h4 a,
.transparent-background .course h3 a,
.transparent-background .tabs-content .is-active .course h3 a,
.grey-bg .tabs-content .is-active .course h3 a,
.transparent-background .event .button {
color:#2f2f2f !important;
}
.course h3 a {
border-bottom:0px !important;
width:100%;
}
.transparent-background .course h3 a:hover,
.grey-bg .tabs-content .is-active .course a:hover,
.transparent-background .tabs-content .is-active .course h3 a:hover {
color:#e79800 !important;
}
.transparent-background .event .button:hover {
color:#FFF !important;
}
.transparent-background .event p,
.transparent-background .event p strong,
.transparent-background .course p,
.transparent-background .course p strong {
color:#5d5d5d !important;
}
.transparent-background .section-title-wrapper:before {
background: #FFF none repeat scroll 0 0;
}
.transparent-background .section-title-wrapper::after {
color:#FFF;
background: none 0px 0px repeat scroll rgb(64, 64, 64);
}

/*————————- General CSS Ends ————————-*/ /*————————- 02 – chỉnh sửa CSS cho section title , thì ta phải goi id của chúng như sau: ————————-*/

.section-title-wrapper {
position:relative;
margin-bottom:40px;
}
.section-title {
overflow:hidden;
position:relative;
text-align:center;
}
.section-title h2 {
margin-bottom:0px;
text-transform:uppercase;
font-weight:bold !important;
}
.section-title p {
font-size:1rem;
text-transform:capitalize;
margin-bottom:20px;
}
.section-title-wrapper::after {
bottom:-6px;
color:rgb(231, 152, 0);
content:"\f19d";
font-family:fontawesome;
font-size:14px;
height:17px;
left:0px;
position:absolute;
right:0px;
text-align:center;
width:39px;
z-index:9;
background:none 0px 0px repeat scroll rgb(255, 255, 255);
margin:0px auto;
}
.section-title-wrapper:before {
background:#e79800 none repeat scroll 0 0;
bottom:0;
content:"";
height:1px;
left:0;
margin:0 auto;
position:absolute;
right:0;
text-align:center;
width:109px;
}
.section-title-wrapper.light-title h2,
.section-title-wrapper.light-title p {
color:#FFF;
}
.section-title-wrapper.light-title:before {
background-color:#FFF;
}
.section-title-wrapper.light-title::after {
background-color:#353536;
color:#FFF;
}
.grey-bg .section-title-wrapper::after {
background:none 0px 0px repeat scroll rgb(247, 247, 247);
}
.owl-nav {
text-align:center;
margin:auto;
width:90px;
margin-top:15px;
}
.owl-nav .owl-prev,
.owl-nav .owl-next {
width:25px;
height:25px;
border:1px solid #e79800;
text-align:center;
display:inlne-block;
float:left;
margin-left:5px;
margin-right:5px;
background-color:#FFF;
color:#e79800;
}
.owl-nav .owl-prev i,
.owl-nav .owl-next i {
line-height:25px;
font-size:1.2rem;
margin-top:-1px;
}
.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
background-color:#e79800;
color:#FFF;
}
.space-section .row .small-12 {
margin-top:15px;
margin-bottom:15px;
}
.space-section .row .small-12:last-child {
margin-bottom:0px;
}
.space-section .row .small-12:first-child {
margin-top:0px;
}
.space-section .row .medium-6:nth-child(2) {
margin-top:0px;
}
.space-section .row .medium-4:nth-child(2),
.space-section .row .medium-4:nth-child(3) {
margin-top:0px;
}
.row .sidebar.small-12 {
margin-top:0px;
}

.padding-between .medium-4,
.padding-between .medium-3,
.padding-between .medium-6,
.padding-between .medium-12 {
margin-top:0.9375rem;
margin-bottom:0.9375rem;
}
.padding-between .medium-6:nth-child(-n+2),
.padding-between .medium-4:nth-child(-n+3),
.padding-between .medium-3:nth-child(-n+4) {
margin-top:0px;
}
.padding-between .medium-6:nth-last-child(-n+2),
.padding-between .medium-4:nth-last-child(-n+4),
.padding-between .medium-3:nth-last-child(-n+4) {
margin-bottom:0px;
}
.padding-between .medium-12:first-child {
margin-top:0px;
}
.padding-between .medium-12:last-child {
margin-bottom:0px;
}

/*————————- Useful Elements CSS Ends ————————-*/ /*————————- 03 – Top bar CSS starts – chỉnh sửa css cho top bar ————————-*/

.topBar {
background-color:#174873;
width:100%;
border-bottom:1px solid #ededed;
padding-top:5px;
padding-bottom:5px;
}
.topBar i {
margin-left:5px;
margin-right:5px;
line-height:1.7;
}
.topBar ul ul {
display:none;
}
.topBar p {
color:#FFF;
margin-bottom:0px;
padding:7px;
}
.topBar .left-side ul,
.topBar .left-side p {
text-align:left;
}
.topBar .right-side ul,
.topBar .right-side p {
text-align:right;
}
.topBar .menu li a {
padding:0px;
line-height:25px;
}
.topBar ul li {
color:#FFF;
padding:7px 5px;
text-align:right;
display:inline-block;
}
.topBar ul li a {
padding-left:5px;
padding-right:5px;
color:#FFF;
}
.topBar ul li a:hover {
color:#e79800;
}

/*————————- Top bar CSS Ends ————————-*/ /*————————- 04 – Header CSS Starts ————————-*/

.header {
position:relative;
z-index:100;
padding-top:30px;
padding-bottom:30px;
-moz-box-shadow:rgba(0, 0, 0, 0.239216) 0px 4px 9px 0px;
box-shadow:rgba(0, 0, 0, 0.239216) 0px 4px 9px 0px;
transform:translateZ(0);
-webkit-transform:translateZ(0);
background-color:#FFF;
}
.sticky-container {
z-index:9999;
}
.is-stuck.header {
padding-top:10px;
padding-bottom:10px;
z-index:9999;
}
.is-stuck .header {
padding-top:10px;
padding-bottom:10px;
}
.is-stuck .top-bar .dropdown.menu>li.opens-right>.is-dropdown-submenu {
margin-top:10px;
}
.header .logo img {
height:40px;
width:auto;
}
.logo h1 {
line-height:40px;
margin-bottom:0px;
}
.search-wrap .search-icon-toggle.hover .fa-search:before {
content:"\f00d";
}
.search-wrap a {
font-size:1rem;
line-height:40px;
}
.search_form .button {
position: absolute !important;
top: 0px;
right: 0px;
padding-top: 11.5px !important;
padding-bottom: 11.5px !important;
}
.search_form {
position: relative;
}
#search-dropdown input[type=text] {
margin-bottom:0px;
}
.top-bar .child-nav.js-dropdown-active {
display:block;
}
.top-bar .child-nav {
display:none;
}
.top-bar {
padding:0px;
width:calc(100% - 20px);
float:left;
background-color:transparent;
}
.top-bar.nopadd {
width:100%;
}
.top-bar ul {
margin:0px;
font-weight:normal;
z-index:9999;
background:#FFF;
}
.top-bar ul .first-sub {
border-top:2px solid;
}
.top-bar ul li a {
text-transform:uppercase;
font-size:1rem;
}
.top-bar ul ul li a {
text-transform:capitalize;
}
.top-bar {
position:relative;
font-family:'Montserrat', sans-serif;
}
.top-bar ul ul {
padding-top:0px;
padding-bottom:0px;
z-index:99999 !important;
border:0px !important;
}
.top-bar .is-dropdown-submenu-parent {
position:relative;
}
.dropdown.menu.large-horizontal>li.is-dropdown-submenu-parent>a:after {
border:0px;
}
.dropdown.menu.large-horizontal>li.is-dropdown-submenu-parent>a,
.dropdown.menu.large-horizontal>li>a {
padding:12px 10px;
}
.top-bar .dropdown.menu>li.opens-right>.is-dropdown-submenu {
position:absolute;
max-width:100%;
margin-top:26px;
}
.top-bar li {
list-style:none;
}
.single-sub ul li a {
width:100%;
padding:10px;
font-weight:normal;
}
.responsive-menu ul li a {
display:block;
width:100%;
}
.top-bar,
.top-bar ul {
background-color:transparent;
}
.top-bar ul .first-sub {
border-top-color:#174873 !important;
}
.top-bar ul li a {
color:#174873;
border-bottom:2px solid transparent;
}
.is-active a,
.top-bar ul li a:hover {
color:#e79800 !important;
border-bottom:2px solid #e79800 !important;
}
.top-bar .dropdown.menu>li.opens-right>.is-dropdown-submenu li a {
border-bottom:0px !important;
}
.top-bar ul .submenu li a,
.top-bar .is-active ul li a {
background-color:#174873;
color:#FFF !important;
}
.top-bar ul ul li {
margin-left:0px;
}
.top-bar ul ul li a {
position:relative;
padding-left:20px;
}
.top-bar .dropdown.menu>li.opens-right>.is-dropdown-submenu li a:before{
content:"\00BB";
display:block;
height:100%;
position:absolute;
top:10px;
left:5px;
}
.top-bar .submenu li a:hover {
color:#e79800 !important;
}
.is-active ul li a {
background-color:#FFF;
color:#174873 !important;
}
.menu .active>a {
background-color:#174873;
color:#FFF;
}
.single-sub ul li a {
border-bottom-color:#174873 !important;
}

/*————————- Header CSS Ends ————————-*/ /*————————- 05 – Header Style 2 ————————-*/

.navigation-style-two {
background-color: #174873;
}
.navigation-style-two .search-wrap a {
line-height:52px;
}
.navigation-style-two .search-wrap a,
.navigation-style-two .top-bar ul li a {
color:#FFF;
}
.navigation-style-two .dropdown.menu.large-horizontal>li>a {
padding-top:18px;
padding-bottom:18px;
}
.navigation-style-two .top-bar .dropdown.menu>li.opens-right>.is-dropdown-submenu {
margin-top:0px;
border-top:1px solid #e79800 !important;
}
.navigation-style-two .is-active a,
.navigation-style-two .top-bar ul li a:hover {
border-bottom:0px !important;
}
.topBar .topbar-new ul {
text-align:left;
}
.topBar .topbar-new ul li a {
padding-top:5px;
padding-bottom:5px;
}
.header-new .text-right p {
margin-bottom:0px;
font-size:1.5rem;
line-height:40px;
font-family:'Montserrat', sans-serif;
color:#e79800;
}
.topbar-new {
background-color:#2f2f2f;
}

/*————————- Header Style 2 Ends ————————-*/ /*————————- 06 – Banner CSS Starts ————————-*/

.main-banner {
position:relative;
}
.rev_slider_wrapper {
margin:0px auto;
background-color:transparent;
padding:0px;
margin-top:0px;
margin-bottom:0px;
}
.layer1 {
z-index:5;
background-color:rgba(0, 0, 0, 0.25);
border-color:rgba(0, 0, 0, 1.00);
}
.layer2 {
z-index:6;
min-width:721px;
max-width:721px;
white-space:normal;
text-align:center;
}
.layer3 {
z-index:7;
white-space:nowrap;
background-color:#174873 !important;
color:#fff !important;
padding:5px 10px !important;
}
.layer4 {
z-index:8;
white-space:nowrap;
outline:none;
box-shadow:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.layer4 a {
color:#FFF;
}
.layer4:hover {
background-color:#174873 !important;
border-color:#174873 !important;
}
.tp-bannertimer{
height: 7px !important;
background-color: rgba(255, 255, 255, 0.25) !important;
}

/*————————- Banner CSS Ends ————————-*/ /*————————- 07 – Information Boxes CSS ————————-*/

.courses-info,
.faculty-info,
.newadmission-info {
position:relative;
padding:30px 30px;
}
.courses-info::after,
.faculty-info::after,
.newadmission-info::after {
content:"";
top:0;
left:0;
bottom:0;
right:0;
position:absolute;
z-index:-1;
}
.courses-info {
background-color:rgba(10, 104, 177, 0.95);
}
.courses-info::after {
background:url('../images/background-pattern.jpg');
}
.faculty-info {
background-color:rgba(23, 72, 115,0.95);
}
.faculty-info::after {
background:url('../images/background-pattern.jpg');
}
.newadmission-info {
background-color:rgba(10, 104, 177, 0.95);
}
.newadmission-info::after {
background:url('../images/background-pattern.jpg');
}
.information-boxes h3 {
color:#FFF;
text-align:center;
text-transform:uppercase;
}
.information-boxes {
text-align:center;
}
.information-boxes p,
.information-boxes ul {
color:#FFF;
text-align:left;
}
.information-boxes .button {
margin-bottom:0px;
margin:auto;
}
.course-page .tabs {
text-align:left;
}

/*————————- Information Boxes CSS Ends ————————-*/ /*————————- 08 – Welcome Message CSS ————————-*/

.welcome-message h2 {
text-transform:uppercase;
font-size:1.850rem;
}
.welcome-message h2 span {
color:#e79800;
font-size:1.850rem;
}
.welcome-message h3 {
font-weight:normal;
text-transform:capitalize;
font-size:1.25rem;
}
.welcome-message .button {
margin-bottom:0px;
}
figure {
margin:0px;
}

/*————————- Welcome Message CSS Ends ————————-*/ /*————————- 09 – Our Courses CSS ————————-*/

.our-courses {
background-color:#f7f7f7;
border-top:1px solid #ededed;
border-bottom:1px solid #ededed;
padding-top:100px;
padding-bottom:100px;
}
.course-wrapper {
position:relative;
}
.tabs {
margin-bottom:40px;
text-align:center;
background-color:transparent;
border-color:transparent;
}
.tabs .tabs-title {
float:none;
display:inline;
}
.tabs .tabs-title a {
display:inline-block;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
padding: 0px 10px;
text-transform: uppercase;
}
.tabs .tabs-title.is-active a {
background-color:transparent;
border-bottom:0px !important;
}
.tabs-panel {
background-color:transparent !important;
width:100%;
padding:0px;
}
.tabs-panel::after {
clear:both;
display:table;
content:" ";
}
.tabs-content {
border:0px;
background-color:transparent;
}
.course {
background-color:#FFF;
padding:10px;
position:relative;
box-shadow: 0 0 6px 1px rgb(234, 234, 234);
}
.course h3, .course h3 a {
font-weight:normal;
}
.course .course-thumb {
position:relative;
margin-bottom:35px;
}
.course .course-thumb .attachment-wc-single-course-thumb {
width:100%;
height:auto;
}
.course .teacher {
width:75px;
height:75px;
border:3px solid #e79800;
border-radius:100%;
position:absolute;
bottom:-20px;
z-index:5;
left:0px;
}
.course .teacher-name {
position:absolute;
bottom:0px;
background-color:#0a68b1;
color:#FFF;
left:65px;
padding:5px 15px;
z-index:3;
border-radius:0px 10px 10px 0px;
font-weight:bold;
}
.course .teacher-name a {
color:#FFF !important;
border:0px !important;
}
.course .price-tag {
position:absolute;
right:0px;
bottom:0px;
background-color:rgba(10, 104, 177, 1);
color:#FFF;
padding:5px 10px;
font-weight:bold;
border-radius:5px;
font-size:1rem;
}
.te-designation {
position:absolute;
top:0px;
left:0px;
padding:5px 10px;
text-align:center;
color:#FFF;
background-color:#e79800;
}
.is-active .bordered-dark {
background-color:transparent !important;
border:1px solid #2f2f2f !important;
color:#2f2f2f !important;
}
.is-active .secondary {
color:#FFF !important;
}
.is-active .secondary:hover {
border-color:transparent !important;
}
.is-active .bordered-dark:hover {
background-color:#2f2f2f !important;
border:1px solid #2f2f2f !important;
color:#FFF !important;
}
.course .button {
margin-bottom:0px;
}
.course ul li i {
margin-right:10px;
}
.course-price-tag {
position: relative;
background-color: rgba(10, 104, 177, 1);
padding: 5px 10px;
font-weight: bold;
border-radius: 5px;
margin-top: 16px;
display: inline-block;
width: auto;
}
.course-price-tag span {
color: #FFF;
font-size: 1rem;
}
.teacher-of-course {
position:relative;
}
.teacher-of-course img {
width:75px;
height:75px;
border-radius:100%;
border:3px solid #e79800;
z-index:10;
}
.teacher-of-course .teacher-name {
position: absolute;
bottom: 20px;
background-color: #0a68b1;
color: #FFF;
left: 70px;
padding: 5px 15px;
z-index: 3;
border-radius: 0px 10px 10px 0px;
font-weight: bold;
display:block;
z-index:9;
}
.teacher-of-course .teacher-name a {
display:block;
font-size:1rem;
color:#FFF;
min-width:67px;
}
.teacher-name a {
color:#FFF;
}
.teacher-name a:hover {
color: #e79800;
}
.small-space {
margin-bottom:15px;
}

/*————————- Our Courses CSS Ends ————————-*/ /*————————- 10 – Our Teachers CSS ————————-*/

.teacher {
position:relative;
}
.teacher .teacher-thumb img {
width:100%;
height:auto;
border-radius:100%;
z-index:2;
}
.teacher .teacher-thumb {
position:relative;
background-color:#174873;
border-radius:100%;
border:2px solid #e79800;
}
.teacher:hover>.teacher-thumb img {
opacity:.3;
}
.teacher:hover>.teacher-thumb .teacher-links {
opacity:1;
}
.teacher-links .menu li a {
font-size:1rem;
display:block;
width:35px;
height:35px;
background-color:#e79800;
color:#FFF;
line-height:35px;
padding:0px;
margin:0px 5px;
border-radius:100%;
text-align:center;
}
.teacher-links .menu>li>a i {
line-height:35px;
margin-left:0px;
margin-right:0px;
}
.teacher-links{
text-align:center;
position:absolute;
bottom:40px;
z-index:5;
width:100%;
opacity:0;
}
.small-button {
display:table;
margin:auto;
margin-top:10px;
padding:5px 15px;
border:1px solid #e79800;
color:#FFF;
background-color:#e79800;
border-radius:20px;
text-transform:uppercase;
}
.small-button:hover,
.teacher-links .menu li a:hover {
color:#e79800;
background-color:#FFF;
border-color:transparent;
}
.teacher-meta {
text-align:center;
}
.teacher-meta h3 a {
font-weight:normal;
}
.teacher-meta h3 {
margin-top:15px;
font-weight:normal;
}

/*————————- Our Teachers CSS Ends ————————-*/ /*————————- 11 – Seminar/Events CSS ————————-*/

.transparent-background,
.seminar-events {
position:relative;
padding-top:100px;
padding-bottom:100px;
background-color:rgba(47, 47, 47, 0.9);
}
.transparent-background::after,
.seminar-events::after {
content:"";
top:0;
left:0;
bottom:0;
right:0;
position:absolute;
z-index:-1;
background:url('../images/background-pattern.jpg');
background-size:cover;
}
.event {
background-color:rgba(255,255,255,0.95);
border-radius:5px;
padding:0px 0px;
}
.event {
background-color:#F7f7f7;
border:1px solid #ededed;
}
.event-data {
padding-top:15px;
padding-bottom:15px;
}
.event h4 a {
font-weight:normal;
text-transform:uppercase;
}
.event .button {
margin-bottom:0px;
}
.event .event-thumb {
position:relative;
padding-right:0px;
}
.row .small-12.event-data,
.row .small-12.event-thumb {
margin-bottom:0px;
margin-top:0px;
}
.event .event-thumb img {
border-radius:0px 5px 5px 0px;
width:100%;
height:auto;
margin-left:1px;
}
.event-date {
background-color:transparent;
position:absolute;
top:0px;
left:100%;
text-transform:uppercase;
font-weight:normal;
font-family:'Montserrat', sans-serif;
font-size:1.5rem;
text-align:center;
color:#2f2f2f;
}
.event-day {
background-color:#e79800;
color:#FFF;
display:block;
margin-bottom:15px;
padding:10px;
border-radius:0px 5px 5px 0px;
}
.event-month {
background-color:#e79800;
color:#FFF;
display:block;
margin-top:15px;
padding:10px;
border-radius:0px 5px 5px 0px;
}
.events-wrapper .columns:nth-child(3),
.events-wrapper .columns:nth-child(4) {
/*margin-top:30px;*/
}

/*————————- Seminar/Events CSS Ends ————————-*/ /*————————- 12 – Gallery CSS ————————-*/ .gallery-thumb { width:25%; padding-left:2px; padding-right:2px; margin-top:2px; margin-bottom:2px; } .gallery-container .item-grid img:hover { opacity:.7; } /*————————- Gallery CSS Ends ————————-*/ /*————————- 13 – Our Process ————————-*/

.upper-background {
height:100%;
width:auto;
position:absolute;
bottom:0px;
left:0px;
}
.our-process h2 {
font-size:2.5rem;
text-transform:uppercase;
margin-bottom:40px;
color:#e79800;
}
.transparent-background .our-process h2 {
color:#e79800 !important;
}
.process h3,
.process p {
color:#FFF;
margin-bottom:0px;
}
.process h3 {
text-transform:capitalize;
font-weight:normal;
}
.process .number {
float:left;
font-size:2rem;
background-color:#f7f7f7;
color:#2f2f2f;
display:block;
width:60px;
height:60px;
border-radius:100%;
text-align:center;
line-height:60px;
margin-right:25px;
font-weight:bold;
}
.process .right-info {
float:left;
}
.process {
margin-bottom:30px;
}
.our-process .process:last-child {
margin-bottom:0px;
}

/*————————- Our Process Ends ————————-*/ /*————————- 14 – Testimonials Starts ————————-*/

.testimonial {
background-color:#f7f7f7;
border-radius:5px;
border:1px solid #ededed;
}
.testimonial .testimonial-thumb {
float:left;
}
.testimonial h4 {
font-weight:normal;
}
.testimonial .testimonial-detail {
float:left;
width:calc(100% - 212px);
padding:10px;
}
.testimonial .testimonial-thumb img {
height:200px;
width:auto;
border-radius:5px 0px 0px 5px;
border-right:1px solid #ededed;
}
.testimonial cite {
color:#2f2f2f;
}
.light_testimonial .section-title h2,
.appointment-form .section-title h2 {
color:#FFF;
}
.light_testimonial .section-title h2 span,
.appointment-form .section-title h2 span {
border-bottom-color:#EAEAEA !important;
}
.light_testimonial .testimonial blockquote,
.light_testimonial .testimonial h5,
.light_testimonial .testimonial cite {
color:#FFF;
}

/*————————- Testimonials Ends ————————-*/ /*————————- 15 – Blog Posts Starts ————————-*/

.blog-posts {
background-color:#f7f7f7;
border-top:1px solid #ededed;
border-bottom:1px solid #ededed;
padding-top:100px;
padding-bottom:100px;
}
.blog-post h3 a {
word-wrap:break-word;
}
.post {
position:relative;
}
.post-thumb {
z-index:2;
}
.post-thumb img {
width:100%;
}
.post-excerpt p:last-child {
margin-bottom:0px;
}
.post h4,
.post h4 a {
margin-bottom:0px;
font-weight:normal;
}
.post-meta {
margin-top:5px;
margin-bottom:5px;
border-top:1px solid #ededed;
border-bottom:1px solid #ededed;
}
.post-content {
background-color:#FFF;
width:calc(100% - 30px);
padding:15px;
z-index:5;
margin-top:-30px;
position:relative;
margin-left:15px;
}
.blog-post.sticky {
border-bottom:5px solid #ededed;
}
.blog-post .sticky-post {
position: absolute;
top: 0px;
right: 0px;
background-color: #545454;
color: #FFF;
padding: 15px;
line-height: 1px;
text-transform: uppercase;
}
.read-more {
margin-left:5px;
}
.load-more .button {
margin-top:15px;
margin-bottom:0px;
}
.blog-post .post-excerpt h3:first-child,
.blog-post .post-excerpt h2:first-child {
margin-top:0px;
}
.blog-post .post-excerpt h2 {
margin-top:40px;
}
.blog-post .post-excerpt h3 {
margin-top:35px;
}
.blog-post .post-excerpt ul,
.blog-post .post-excerpt ol {
list-style: outside;
margin-left: 25px;
padding-left: 25px;
margin-top: 25px;
margin-bottom: 25px;
}
.blog-post .post-excerpt ol {
list-style-type: decimal;
}
.blog-post .post-excerpt blockquote {
background-color:#ededed;
text-align:center;
margin-top:25px;
margin-bottom:25px;
padding:30px;
border-left:0px;
}
.blog-post .post-excerpt:after {
clear:both;
display:table;
content:"";
}

/*————————- Blog Posts Ends ————————-*/ /*————————- 16 – Brands Carousel ————————-*/

.brands-wrap {
margin-bottom:100px;
}
.bran-logo {
padding:5px;
}
.bran-logo .thumbnail {
margin-bottom:0px;
border:1px solid #ededed;
padding:3px;
opacity:.8;
height:55px;
width:auto !important;
}
.bran-logo .thumbnail:hover {
opacity:1;
}
.side-controls .owl-controls {
margin-top:0px;
}
.side-controls .owl-prev ,
.side-controls .owl-next {
font-size: 19px;
border: 1px solid;
width: 25px;
height: 25px;
display: table;
text-align: center;
position: absolute;
top: 50%;
margin-top:-12.5px;
}
.side-controls .owl-next {
right:-8px;
}
.side-controls .owl-prev {
left:-8px;
}
.side-controls .owl-controls {
margin: auto;
display: block;
width: 0px;
margin-top:0px;
}
.side-controls .owl-nav {
margin-top:0px;
}

/*————————- Brands Carousel Ends ————————-*/ /*————————- 17 – Call to Action Box ————————-*/

.call-to-action {
padding-top:30px;
padding-bottom:30px;
}
.call-to-action i {
border:1px solid #2f2f2f;
width:40px;
height:40px;
text-align:center;
line-height:40px;
margin-right:15px;
}
.call-to-action h2 span {
color:#e79800;
font-size:1.35rem;
}
.call-to-action h2 {
font-size:1.35rem;
font-weight:normal;
margin-bottom:0px;
}
.call-to-action p {
margin-bottom:0px;
}
.call-to-action .button {
margin-bottom:0px;
}
.call-to-action {
background-color:#f7f7f7;
border-top:1px solid #ededed;
border-bottom:1px solid #ededed;
}

/*————————- Call to Action Box Ends ————————-*/ /*————————- 18 – Title Section CSS ————————-*/

.title-section {
padding-top:80px;
padding-bottom:80px;
position:relative;
background-color:rgba(27, 27, 27, 0.8);
}
.title-section::after {
content:"";
background:url('../images/background-pattern.jpg');
top:0;
left:0;
bottom:0;
right:0;
position:absolute;
z-index:-1;
background-size:cover;
}
.title-section h1 {
text-transform:uppercase;
margin-top:0px;
margin-bottom:5px;
color:#FFF;
word-wrap: break-word;
}
.title-section ul {
margin: 0px;
}
.breadcrumbs li,
.breadcrumbs li a {
font-size: 0.65rem;
}
.breadcrumbs li,
.breadcrumbs li a {
color: #FFF;
}

/*————————- Title Section CSS Ends ————————-*/ /*————————- 19 – Page Preloader ————————-*/

#loading {
background-color:#f7f7f7;
height: 100%;
width: 100%;
position: fixed;
z-index: 999999999;
margin-top: 0px;
top: 0px;
}
#loading img {
height:100px;
width:auto;
}
#loading .image-preloader {
padding-top:50px;
padding-bottom:50px;
text-align:center;
}
#loading.loaded {
display:none !important;
}
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#object {
width: 80px;
height: 80px;
background-color: #174873;
-webkit-animation: animate 1s infinite ease-in-out;
animation: animate 1s infinite ease-in-out;
margin-right: auto;
margin-left: auto;
margin-top: 60px;
}
@-webkit-keyframes animate {
0% { -webkit-transform: perspective(160px); }
50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}

@keyframes animate {
0% {
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
} 50% {
transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
} 100% {
transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
}
}

/*————————- Page Preloader Ends ————————-*/ /*————————- 20 – Single-teacher CSS ————————-*/

.progress .ninty-five {
width: 95%;
}
.progress .sixty-five {
width:65%;
}
.progress .seventy-five {
width:75%;
}
.progress .eighty-five {
width:85%;
}
.single-teacher .staff-links {
width:100%;
position:static;
}
.courses-table-heading {
background-color:#e79800;
padding-top:10px;
padding-bottom:10px;
}
.courses-table-row div{
float:left;
}
.courses-table-heading h5 {
color:#fff;
font-weight:normal;
margin-bottom:0px;
text-transform:uppercase;
text-align:center;
}
.courses-detail {
background-color:#f7f7f7;
border-top:1px solid #fff;
padding-top:5px;
padding-bottom:5px;
}
.courses-detail span{
margin-top:10px;
text-transform:capitalize;
border-bottom:1px solid #fff;
text-align:center;
}
.courses-detail span:last-child {
border-bottom:0px;
}
.course-id {
border-right:1px solid #fff;
min-width: 70px;
width: 70px;
text-align:center;
}
.course-name {
border-right:1px solid #fff;
min-width: 555px;
width: 555px;
}
.course-name a{
text-align:left;
padding-left:30px;
}
.course-duration {
border-right:1px solid #fff;
min-width: 230px;
width: 230px;
text-align:center;
}
.course-time-line {
min-width: 315px;
width: 315px;
text-align:center;
}
.courses-table-row:after {
clear:both !important;
content: ' ';
display: table;
}

/*————————- Single-teacher CSS starts ————————-*/ /*————————- 21 – Styles For Inner Pages Starts ————————-*/ /*————————- 21.1 – Contact Us Page ————————-*/ .content-section h2 { font-weight:normal; } .content-section h1, .content-section h2, .content-section h3, .content-section h4, .content-section h5, .content-section h6 { font-weight:normal; } .content-section h6 { font-size:0.90rem; } .content-section label { font-weight:bold; } .contact-info { margin-bottom:25px; } .content-section h4 { font-weight:normal; } .contact-info h4 { border-bottom:1px solid #ededed; padding-bottom:4px; margin-bottom:15px; } .contact-info p { margin-bottom:0px; } .contact-info img { width:100%; height:auto; } .contact-form .button { margin-bottom:0px; } /*————————- 21.2 About Us Page ————————-*/ .icon-box { position: relative; clear: both; } .icon-box .icon-side { width: 55px; height: 55px; border-radius: 100%; font-size: 30px; text-align: center; line-height: 55px; margin-right: 7px; color: #FFF !important; background-color: #e79800; } .icon-box .info-side { margin-left: 7px; font-size: 16px; padding-top: 0px; width: calc(100% – 70px); } .info-side p strong { font-size: 18px; color:#2f2f2f; font-family:’Montserrat’, sans-serif; } .icon-box p { margin-bottom: 0px; } /*————————- 21.3 – 404 Error Page ————————-*/ .pageerror h2 { text-align: center; margin-top: 0px; font-weight: bold; font-size: 133px; } .pageerror h3 { text-align: center; } .error-page-form { margin:auto !important; margin-top:30px; float:none !important; } input::-webkit-input-placeholder { /* Chrome */ color: #5d5d5d; } input:-ms-input-placeholder { /* IE 10+ */ color: #5d5d5d; } input::-moz-placeholder { /* Firefox 19+ */ color: #5d5d5d; opacity: 1; } input:-moz-placeholder { /* Firefox 4 – 18 */ color: #5d5d5d; opacity: 1; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { font-size:18px !important; font-weight:normal !important; } /*————————- 21.4 – Boxed Page ————————-*/ .boxed { max-width: 1250px; margin: auto; box-shadow: 0px 0px 6px 1px #CCC; background-color:#FFF; position:relative; z-index:0; overflow:hidden; } body.box { background-image: url(‘../images/background-pattern.jpg’); background-repeat: repeat; z-index:-10; } .box .main-banner { overflow:hidden; } .box .gallery-thumb { max-width:310px; } /*————————- 21.5 – Testimonials Page ————————-*/ .testimonial-page .testimonial .testimonial-thumb img { height:145px; width:auto; } /*————————- 21.6 – Blog Page ————————-*/ .pagination { text-align:center; margin-bottom:0px; margin-top:30px; } .pagination .current { background:#174873; padding:0px; display: block; padding: .1875rem .625rem; } .pagination .current a { color:#FFF; } .pagination .current a:hover, .pagination a:hover { background-color:#174873; color:#FFF; } .blog-page .featured-image { position:relative; } .blog-page .featured-image.have-meta { min-height:60px; } .full-width .featured-image img { width:100%; height:auto; } .featured-image img { max-width:100%; height:auto; } .blog-page .blog-post { border-bottom:1px solid #ededed; margin-bottom:30px; padding-bottom:30px; } .single-post-page .blog-post { border-bottom:0px; padding-bottom:0px; } .single-post-page .blog-post .post-excerpt h4 { font-weight:normal; margin-bottom:0.5rem; } .blog-page .blog-post.last-post { margin-bottom:0px; } .blog-page .post-meta { border-top:0px; border-bottom:0px; background-color:#e79800; padding:6px 10px; /*max-width:430px;*/ color:#FFF; position:absolute; bottom:15px; left:4px; } .blog-page .no_image .post-meta { position:relative; bottom:0px; left:0px; margin-bottom:15px; float:left; } .post-meta ul { margin-bottom:0px; color:#FFF; } .post-meta ul li i { color:#FFF; margin-left:5px; margin-right:5px; } .post-meta ul li { display:inline; padding-left:7px; padding-right:7px; border-right:1px solid #CCC; line-height:1px; } .post-meta ul li:first-child { padding-left:0px; } .post-meta ul li:last-child { border-right:0px; } .blog-page .post-meta a { color:#FFF; } .blog-post .post-excerpt h4 { font-weight:bold; } .sharing-posts { border-top:1px solid #EDEDED; border-bottom:1px solid #EDEDED; margin-top: 25px; margin-bottom: 25px; padding-top: 10px; padding-bottom: 10px; } .post-share { text-align:right; } .post-share a { margin-right:10px; margin-left:10px; padding-top:0px; padding-bottom:0px; } .post-tags .tags li a { border:0px; background-color:transparent; color:#3b3d42; padding-left:7px; padding-right:7px; } .post-tags .tags { margin-bottom:0px; } .single-post .sharing-posts .small-12{ margin-top : 0px; margin-bottom: 0px; } .author-box { margin-bottom: 25px; padding-top: 25px; padding-bottom: 25px; border: 1px solid #ededed; background-color:#f1f1f1; border-radius:5px; } .author-box p { margin-bottom:0px; } .content-section .events-wrapper .event { border:1px solid #ededed; } /*———————– 21.7 – Our Staff CSS ————————*/ .staff-introduction h2 { border-bottom:1px solid #ededed; } .shadow { box-shadow: 0px 0px 2px 1px #CCC; padding: 10px; } .single-teacher .shadow { position:relative; } .staff-detail h4, h4 a { margin-top: 10px; font-weight:normal; } .staff-detail h4 a, h4 span{ font-weight:normal; } .section-title h2 span { padding-bottom: 10px; margin-bottom: 30px; display: block; font-size: 1.6rem; text-align: center; margin-left: 15px; } .staff-box { position:relative; } .staff-links{ width: 100%; position: absolute; bottom:10px; left:0px; } .staff-links .menu>li>a i { line-height: 35px; margin-left: 0px; margin-right: 0px; } .staff-links .menu li a { font-size: 1rem; display: block; width: 35px; height: 35px; background-color: #e79800; color: #FFF; line-height: 35px; padding: 0px; margin: 0px 5px; border-radius: 100%; text-align: center; } .staff-links .menu li a:hover { color:#e79800; background-color:#FFF; border-color:transparent; } .staff-detail .small-button { margin:0px; } .special-icon-margin li i { margin-right:10px; } /*——————— 21.8 – Courses Pages ———————*/ .course-section { position:relative; clear:both; } .courses-wrapper .course-section { margin-top:50px; } .courses-wrapper .course-section:first-child { margin-top:0px; } /*——————— 21.9 – WooCommerce Pages ———————*/ .woocommerce .call-to-action .button { position:relative; } .single-product-thumbs { margin-top:25px; } .single-product-thumbs .woocommerce-product-gallery__image { width:calc(25% – .73125rem); height:auto; float:left; margin-right:.975rem; border: 4px solid #fefefe; box-shadow: 0 0 0 1px hsla(0,0%,4%,.2); display: inline-block; line-height: 0; max-width: 100%; transition: box-shadow .2s ease-out; border-radius: 0; } .product-thumbnails .woocommerce-product-gallery__image:last-child { margin-right:0px; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { font-size: 100%; margin: 0; line-height: 1; cursor: pointer; position: relative; text-decoration: none; overflow: visible; padding: .618em 1em; font-weight: 700; border-radius: 0px; left: auto; color: #FFF; background-color: #174873; border: 0; white-space: nowrap; display: inline-block; background-image: none; box-shadow: none; -webkit-box-shadow: none; text-shadow: none; } .woocommerce .sidebar #respond input#submit, .woocommerce .sidebar button.button, .woocommerce .sidebar input.button, .single-product #respond input#submit, .single-product a.button, .single-product button.button, .single-product input.button { cursor: pointer; color: #FFF; background-color: #174873; box-shadow: none; -webkit-box-shadow: none; text-shadow: none; padding: .6900em 1em; } .woocommerce a.added_to_cart { padding-top: .5em; white-space: nowrap; position: absolute; top: -54px; right:0px; background-color:#e79800; color:#FFF; padding:1px 10px; width:100%; text-align:center; } .woocommerce .products .pro-buttons ul { margin-bottom:0px; } .woocommerce-MyAccount-navigation ul { list-style:none; } .woocommerce-MyAccount-navigation ul li a { padding:5px 10px; display:block; } .coupon input[type=text] { width: 300px !important; padding-top: 5px !important; padding-bottom: 5px !important; height: 31px; } .shop .our-store .price, .shop .our-store h6, .shop .our-store .star-rating { text-align:left; margin-left:0px; } .product-info { height:87px; margin-bottom:30px; } .products-wrap .columns:last-child { float:left; } .shop .pagination-container { border-top:1px solid #ededed; padding-top:15px; } .woocommerce .woocommerce-ordering select { margin-bottom:0px; } .wc-tabs-wrapper .tabs { text-align:left; } .woocommerce div.product .woocommerce-tabs ul.tabs { padding-left:5px; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background-color:#174873; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color:#FFF; font-weight:normal; } .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color:#ededed !important; } .woocommerce-Reviews-title { font-weight:normal; margin-bottom:15px; font-size:1.3rem; } .woocommerce-Tabs-panel h2 { font-size:1.30rem; } .woocommerce-Tabs-panel h3 { font-size:1.10rem; } .woocommerce div.product .woocommerce-tabs .panel { margin-bottom:0px; } .wc-tabs-wrapper { margin-top:30px; } .woocommerce .entry-summary p { margin-bottom:15px !important; } .woocommerce div.product form.cart, .woocommerce div.product p.cart { margin-bottom:0px; } .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background-color:#174873; color:#FFF; } .woocommerce .star-rating span { line-height:15px; } .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width:41.66667%; } /*——————— 21.10 – Online Course Page ———————*/ .online-course-pg .price span { font-size:32px; font-weight:bold; color:#333; line-height:1; } .online-course-pg .price { margin-bottom:7px; } .online-course-pg .side-content { border-bottom:1px solid #ededed; margin-bottom:10px; } .online-course-pg .side-content .button { margin-bottom:10px; } .online-course-pg .side-content .list-right { font-weight:bolder; } .online-course-pg .side-content .list-left { min-width: 100px; width: 100px; display: inline-block; } .online-course-pg .list-item { margin-bottom:5px; display:flex; } .online-course-pg .online-course-video iframe { width:100%; height:370px; border:2px solid #000; } .three-icons { background-color:#174873; padding:45px 0 60px; color:#fff; } .three-icons h3 a { text-align:center; font-size: 18px; margin-bottom: 10px; margin-top: 15px; color:#fff; padding-bottom: 30px; } .three-icons .icon-section { padding:0 45px; text-align:center; } .three-icons .icon-section i { color:#fff; font-size:60px; } .three-icons .icon-section h3 { color:#fff; } .three-icons h3 a:hover { color:#e79800; } .three-icons .icon-section p { color:#fff; margin-bottom:0px; } .online-course-pg .about-course h3 { font-weight: bold; font-size: 15px; display: inline-block; margin-top: 10px; } .about-course .post-meta { border:0px; } .about-course p { margin-bottom:15px; margin-top:15px; } .course-box-wrapper { display:flex; margin-bottom:30px; margin-top:30px; } .course-box-wrapper .course-box { border-radius: 4px; border: 1px solid #d3d3d3; padding: 20px; margin-right: 20px; display:flex; } .course-box i { color:#174873; font-size:50px; margin-left:10px; } .instructor h3 { margin-bottom: 15px; text-align:center; font-weight:normal; } .instructor p { text-align:center; } .widget-content { display:flex; } .widget-post { margin-bottom:15px; display:flex; } .widget-thumb { float:left; margin:0 10px 10px 0; } .widget-thumb img { height:50px; width:50px; } .courses-lecture { display:flex; width: 100%; border-top: 1px solid #ededed; font-size: 1rem; color: #777; padding-top: 15px; padding-bottom: 15px; line-height: 1.7; } .courses-lecture i { color: #e79800; font-size: 1rem; margin-right: 10px; } .course-wrapper { display:block; } .courses-lecture p { margin-right:15px; margin-bottom:0px; margin-top:0px; } .courses-lecture .free { margin-right:15px; } .courses-lecture .duration { float: right; color: #e79800; } .free .button { border-radius: 15px; line-height: 0.2; font-size: 0.875rem; margin-bottom:0px; } /*————————- Styles For Inner Pages Ends ————————-*/ /*————————- 22 – Comments CSS ————————-*/ .comments_list_wrap ul.children, .comments_list_wrap ul > li + li { margin-top: 1.15em; } .comments_wrap .comment-respond { padding-bottom:4px; } .comments_list_wrap .comment-respond { padding-top:1rem; } .comment-respond h3 small a { font-weight:norma; font-size:70%; } .comments_list_wrap > ul { padding-bottom: 1.25em; } .comments_list_wrap ul > li + li > .comment_author_avatar { top: 1.5em; } /* Trackbacks and pingbacks */ .comments_list > li.trackback { list-style:none; margin-left:0; padding-left:0; padding-right:4em; min-height: 0; position:relative; padding:30px; background-color:#f7f7f7; } .comments_list > li.trackback p { font-style:italic; padding-bottom:0.8em; } .comments_list > li.trackback p a { font-style:normal; } .comments_list > li.trackback .edit-link { position:absolute; right:0; top: 0; } .comments_list > li+li.trackback .edit-link { margin-top: 1.25em; } .comments_list > li.pingback { background-color:#f8f8f8; padding:30px; } /* Comment list */ .comments_list_wrap .comments_closed { margin-top:2em; color:#2f2f2f; } .comments_list_wrap .comments_list_title { margin-bottom: 0.92em; } .comments_list_wrap > ul { padding:0; margin:0; list-style: none; } .comments_list_wrap ul > li { overflow:hidden; position:relative; min-height:5em; } .comments_list_wrap ul > li:before { display:none; } .comments_list_wrap ul ul { padding-left: 0; margin-left: 3.6em; } .comments_list_wrap ul ul ul ul ul { margin-left:0; } .comments_list_wrap .comment_author_avatar { position: absolute; left: 1.8em; top: 2.2em; z-index: 1; width: 75px; height: 75px; } .comments_list_wrap .comment_author_avatar img{ width: 100%; max-width: none; } .comments_list_wrap .comment_content { padding: 1.8em 1.8em 1.55em 9em; border: 1px solid #ededed; } .comments_list_wrap .comment_info { margin-bottom:0.8em; } .comments_list_wrap .comment_info > span + span:before { content: “|”; display:inline-block; margin: 0 0.9em; } .comments_list_wrap .comment_not_approved { padding: 0 0 0.5em 0; font-style:italic; font-weight:300; } .comments_list_wrap .comment_text { margin-bottom:0.7em; } .comments_list_wrap .comment_text p { margin:0; } .comments_list_wrap .comment_text p+p { margin-top: 0.5em; } .comments_list_wrap .comment_text ul { margin:0; padding: 0 0 0 1.5em; list-style:outside; } .comments_list_wrap .comment_text ul > li > ul { margin-top: 0.5em; } .comments_list_wrap .comment_text ul > li { min-height:0; border:none; padding:0; margin:0 0 0.5em 0; overflow:visible; } /* Comments form */ .comments_wrap .comments_list_wrap .comment-reply-title { display:block; } .comments_wrap .comments_notes { font-size:1em; color:#909090; } .comments_wrap .comments_field { margin-bottom:20px; float: left; width: 48%; padding: 0; } .comments_wrap .comments_field + .comments_field { margin-left: 3%; width: 49%; } .comments_wrap .comments_field label { display:none; } .comments_wrap .comments_field input, .comments_wrap .comments_field textarea { width:100%; } /* Submit button */ .comments_form_wrap { padding-top: 30px; } .spacer-border { border-top: 1px solid #ededed; } .comments_wrap .form-submit { text-align:right; margin:0; padding-left:4px; } .comments_wrap .form-submit input[type=”submit”], .comments_wrap .form-submit input[type=”button”] { padding-right: 0.8em; } .comments_form_title { margin-bottom: 0.95em; } .comments_wrap .comments_field.comments_message { width: 100%; margin: 0 0 1.65em; } .form-submit { padding:0rem 0.975rem; } /*————————- Comments CSS ends ————————-*/ /*————————- 23 – Sidebars CSS ————————-*/ .sidebar .icon-box { margin-bottom:25px; } .sidebar .widget .menu li, .sidebar .widget .menu li a { display:block; width:100%; } .sidebar .widget .menu li a { padding-top:5px; padding-bottom:5px; padding-left:0px; padding-right:0px; } .sidebar .widget .menu .sub-menu { padding-left:15px; } .sidebar .testimonials { padding-top:20px; padding-bottom:40px; } .sidebar .widget { border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; border-left: 1px solid #ededed; border-right: 1px solid #ededed; margin-bottom:25px; padding:15px; } .sidebar .widget:last-child { margin-bottom:0px; } .arrow-starter li::before { content: “\00BB”; margin-right: 10px; } .widget h2 { font-size: 1.25rem; text-align: left; padding: 0px; margin-bottom: 15px; border-bottom: 1px solid #ededed; padding-bottom:10px; } .widget .button, .search input[type=text] { margin-bottom:0px; } .widget .tags li { padding-left:0px; padding-right:0px; } .widget .tags li a { padding:5px 10px; text-wrap:suppress; white-space: nowrap; margin:5px; display:inline-block; } .widget .popular-post { margin-bottom:8px; margin-top:8px; border-bottom:1px solid #ededed; } .widget .popular-post:last-child { border-bottom:0px; margin-bottom:0px; } .widget .popular-post p { margin-top:5px; } .widget .popular-post img { margin-right:10px; } .sidebar ul li a:before{ content:”\00BB”; margin-right:10px; } .sidebar ul ul ul ul { display:none; } .sidebar .address h4, .sidebar .address i { color:#2f2f2f; } .tags { list-style:none; margin-left:0px; margin-bottom:0px; } .tags li { display:inline-block; padding-left:0px; padding-right:0px; } .tags li a { background-color:#ededed; } .tags li a:hover { background-color:#e79800; color:#FFF; } .tags li:first-child { padding-left:0px; } .sidebar .tags li a:before { content:none; margin-right:0px; } .sidebar ol li a { line-height:22px; } .sidebar .menu, .widget ul { margin-left: 0px; margin-bottom: 0px; } .sidebar .menu li, .widget li { list-style: none; } .sidebar .without-links li { padding: 8px 0px; line-height:1.4; } .sidebar .without-links li:last-child { padding-bottom: 0px; } .widget .teacher-of-course img { width:100%; height:auto; } .widget .teachers-name a { font-size:1.25rem; text-align:center; margin-top:10px; margin-bottom:10px; font-weight:normal; display:block; } .widget .course-price-tag { margin-top:0px; width:100%; text-align:center; background-color:#ededed; color:#2f2f2f; } .widget .course-price-tag span { color:#2f2f2f; } .widget .register-button { display:block; width:100%; margin-top:15px; } .reveal-overlay { z-index:105; } /*————————- Sidebars CSS Ends ————————-*/ /*————————- 24 – Products Section CSS ————————-*/ .our-store .price { font-size:1rem; text-align:center; } .our-store h6 { text-align:center; margin-top:10px; margin-bottom:10px; } .our-store h6 a { font-size:1rem; font-weight:normal; } .price .old { margin-left:15px; font-weight:normal; font-size:90%; text-decoration:line-through; } .our-store img { width:100%; height:auto; } .our-store .pro-rating { text-align:center; margin-top:10px; } .product-img { position:relative; width:100%; } .product-img img { overflow:hidden; width:100%; } .product-img .sale { position:absolute; top:0px; left:0px; font-size:1rem; padding:10px 10px; text-transform:uppercase; font-weight:bold; color:#FFF; background-color:#174873; } .pro-buttons { position:absolute; bottom:33px; left:0px; width:100%; background-color:#ededed; } .pro-buttons a { font-size:1.2rem; } .pro-buttons, .add-to-cart-top { opacity:0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .add-to-cart-top { position: absolute; width: 100%; bottom: 0px; } .single-product:hover>.product-img .pro-buttons, .single-product:hover>.product-img .add-to-cart-top { opacity:1; } .pro-buttons ul { list-style:none; text-align:center; margin:0px; } .pro-buttons ul li { display:inline; margin-left:11px; margin-right:11px; } .pro-buttons a { text-align:center; } .add-to-cart-top .button { width:100%; position:absolute; bottom:0px; margin:0px; } .pro-buttons, .add-to-cart-top { opacity:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .product-img .sale, .type-product .sale, .product-page .sale { position:absolute; top:0px; left:0px; font-size:1rem; padding:1px 10px; text-transform:uppercase; font-weight:bold; background-color:#e79800; color:#FFF; z-index:9999; } .single-product:hover>.product-img .pro-buttons, .single-product:hover>.product-img .add-to-cart-top { opacity:1; } .single-product { padding-top:0px; margin-bottom:30px; } .no-product-margin .single-product, .single-product .single-product { margin-bottom:0px; } .no-product-margin .product-info, .single-product .product-info { margin-bottom:0px; } .our-store .single-product { padding-bottom:0px; } .page-filter { padding-top:15px; margin-top:15px; border-top:1px solid #ededed; } .page-filter .pagination { text-align:center; } .single-shop .our-store { margin-bottom:0px; } .product-thumbnail img { width:100%; height:auto; } .product-meta { padding-top: 8px; padding-bottom: 8px; margin-bottom: 15px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; font-size: 1rem; margin-top: 10px; } .product-share { padding-top:15px; border-top:1px solid #ededed; } .add-cart-option { margin-top:25px; margin-bottom:25px; } .add-cart-option input[type=number] { max-width:75px; float:left; margin-right:20px; } .product-detail .price { font-size:1.25rem; font-weight:bold; } .product-detail h2 { font-weight:bold; text-transform:uppercase; } .single-products-page .price .normal { font-size:1.5rem; font-weight:bold; } .price ins { text-decoration:none; } .price span { color:#e79800; font-size:1.25rem; border-bottom:0px; } .price del span { color:#5d5d5d; font-size:0.875rem; border-bottom:0px; } .price del { margin-right:15px; } .qty { max-width:75px; } .cart-item .product-thumbnail img { height:100px !important; width:auto; } .apply-coupon { margin-top:15px; } .products-page .small-12 { margin-top:0px !important; margin-bottom:0px !important; } .single-product h6 a { font-weight:normal; margin-bottom:0px; } .accordion-title:focus, .accordion-title:hover { background-color:#FFF; border-bottom:1px solid #e79800; color:#e79800; } .accordion-title { font-size:1rem; font-family:’Montserrat’, sans-serif; color:#2f2f2f; } /*————————- Products Section End ————————-*/ /*————————- 25 – Pricing-list CSS ————————-*/ .price-plan { width: 100%; background: #f7f7f7; text-align: center; } .price-plan .price-title { background: #364e72; color: #f7f7f7; font-size: 16px; font-weight:300; padding: 20px 10px 25px; } .title-heading { font-size: 26px; font-weight:normal; margin: 0; padding: 9px; color:#fff; } .price-title strong { font-size: 76px; align-self: baseline; line-height: 1; font-weight: 500; } .price-details { padding: 15px 30px; background-color: #f7f7f7; margin-left: 0px; } .price-details li { text-align: left; padding: 15px 0; border-bottom: 1px solid #cccccc; list-style:none; } .price-plan li:last-child { border-bottom:0px; } .price-details li .fa { position:relative; margin-right:7px; } .red { color:red; } .orange { color:#e79800; } /*————————- Pricing-list CSS Ends ————————-*/ /*————————- 26 – Footer ————————-*/ .footer { width:100%; position:relative; } .footer::after { content: “”; background: url(‘../images/background-pattern.jpg’); background-size:cover; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } .footer h2 { font-size:20px; margin-bottom:10px; font-weight:bold; } .tx-div { width: 45px; display: block; height: 3px; opacity: .8; margin: 10px 0 15px; } .footerTop { padding-top:100px; padding-bottom:100px; } .footerTop ul { margin:0px; list-style:none; } .vertical li a { padding:8px 0px; } .footerbottom { width:100%; padding-top:15px; padding-bottom:15px; } .footer-widget { margin-bottom:20px; } .footer-widget:last-child { margin-bottom:0px; } .footer-widget::after, .widget::after { clear:both; display:table; content:””; } .footerTop ul ul, .footerbottom ul ul { display:none; } .footerbottom .left-side, .footerbottom .left-side ul, .footerbottom .left-side p { text-align:left; } .footerbottom .right-side, .footerbottom .right-side ul, .footerbottom .right-side p, .footerbottom .right-side .copyrightinfo { text-align:right; float:right; } .footerbottom ul { margin:0px; } .footerbottom ul li a { padding:0px 5px; line-height:25px; } .footerbottom ul li:first-child a { padding-left:0px; } .footerbottom ul li:last-child a { border:0px; padding-right:0px; } .copyrightinfo { font-size:1rem; } .address i { width: 45px; height: 45px; border: 2px solid; font-size: 1.2857142857142858em; text-align: center; line-height: 41px; float: left; margin-right: 0.7em; margin-bottom: 0.7em; } .address h4 { font-size: 1rem; text-transform: uppercase; margin: 0 0 5px; font-weight:bold; } .footer ul { margin:0px; } .office-hours li { padding-bottom:10px; } .footer-widget input[type=text] { height:40px; max-width:230px; } .quick-links ul { width:50%; float:left; } .socialicons { line-height:25px; font-size:18px; font-weight:bold; } .socialicons a { margin-right:5px; margin-left:5px; } .footer-widget .menu { margin:0px; } .footer-widget .menu li { display:block; width:50%; float:left; } .footer-widget .menu li a { padding-left:0px; } .footer { background-color:rgba(27, 27, 27, 0.9); color:#FFF; } .footer a { color:#FFF; } .footer p { color:#FFF; } .footer a:hover { color:#e79800; } .footer h2 { color:#f7f7f7; } .tx-div { background-color:#f7f7f7; } .footerTop ul { color:#FFF; } .footerbottom { background:#2f2f2f; color:#FFF; } .footerbottom li { color:#FFF; padding-left:3px; padding-right:3px; display:inline-block; } .footerbottom a { color:#FFF; } .footerbottom a:hover { color:#e79800; } .address i, .address h4 { color:#f7f7f7; } .address p { line-height:1.4; } #top { position: fixed; right: 15px; text-align: center; bottom: 15px; font-weight: bold; text-decoration: none; width: 30px; height: 30px; padding: 0px 0px 0px; font-size: 22px; opacity: .9; z-index: 99; display:none; background-color:#FFF; color:#e79800; line-height: 30px; border:1px solid #e79800; } #top:hover { background-color:#e79800; color:#FFF; } .single-post-page .spacer-border { margin-bottom:25px; } /*————————- Footer CSS ends here ————————-*/ /*————————- 27 – Mobile Adjustments Media Queries ————————-*/

@media only screen and (max-width: 40em) {
.boxed {
max-width:100%;
margin:auto;
border-left:0px;
border-right:0px;
}
.comment_special_wrap {
position:relative;
}
.comments_list_wrap .comment_author_avatar {
right: 10px;
width: 50px;
height: auto;
bottom: 10px;
top: auto;
left: auto;
}
.comments_list_wrap .comment_content {
padding:1.5em 1.5em 1.5em 1.5em;
}
.comments_list_wrap ul ul {
margin-left:0rem;
}
.comments_list_wrap ul ul ul {
margin-left:0rem;
}
.comments_list_wrap .comment_author_avatar img {
border-radius:100%;
}
.logo img {
height:90px;
width:auto;
}
.topBar .left-side p,
.topBar .right-side p,
.topBar .left-side ul,
.topBar .right-side ul {
text-align:center;
}
.top-bar {
width:100%;
padding:0px;
}
.topBar p {
background-color:transparent;
text-align:center;
float:none;
padding:3px;
}
.topBar ul li {
padding:3px;
}
.topBar ul .first-social {
padding-left:15px;
}
.topBar .row .small-12 {
margin-bottom:0px;
margin-top:0px;
}
.topBar .text-right {
text-align:center;
}
.top-bar-title {
margin-right: 0px;
width: 20px;
margin: auto;
float: none;
}
.top-bar ul {
width:100%;
margin-top:10px;
background-color:#174873;
}
.top-bar ul li a {
padding-left:15px;
color:#FFF;
}
.top-bar ul li a:hover,
.top-bar ul .is-active a,
.top-bar ul li a {
border-bottom:0px !important;
color:#FFF !important;
}
.top-bar ul li a:hover {
color:#e79800 !important;
}
.top-bar ul ul {
margin-top:0px;
}
.main-container .navigation-style-two {
background-color:transparent;
}
.is-accordion-submenu-parent>a:after {
border-color: #FFF transparent transparent;
}
.top-bar ul ul li a {
padding-left:25px;
}
.top-bar ul ul li a:before{
content:"\00BB";
margin-right:10px;
}
.nav-wrap {
position:relative;
}
.search-wrap {
position:absolute;
top:-13px;
right:50%;
margin-right:-20px;
font-size:20px;
}
.menu-icon.dark {
margin-left:-25px;
}
.reason-section .medium-8 {
padding-left:0.625rem;
}
.owl-prev ,
.owl-next {
position: relative !important;
}
.owl-prev:hover ,
.owl-next:hover {
position: relative !important;
}
.owl-next {
float:left !important;
right:0px !important;
margin-left:5px !important;
}
.owl-prev {
float:left !important;
left:0px !important;
margin-right:5px !important;
}
.owl-controls {
margin-top:10px !important;
}
.owl-nav {
text-align: center;
margin: auto;
width: 90px;
position: absolute;
left: 50%;
margin-left: -45px;
}
.side-controls .owl-prev,
.side-controls .owl-next {
width:35px;
height:35px;
margin-top:0px;
}
.teacher {
padding-left:10px;
padding-right:10px;
}
.section-title-wrapper {
padding-left:10px;
padding-right:10px;
}
.event-thumb {
padding-right:.625rem;
display:none;
}
.gallery-container {
text-align:center;
}
.gallery-container a {
display:inline-block;
width:50%;
}
.gallery-container .gallery-thumb {
width: 100%;
padding: 2px;
margin: 0px !important;
}
.upper-background {
display:none;
}
.process .right-info {
float: left;
width: calc(100% - 85px);
}
.seminar-events {
padding-top:40px;
padding-bottom:40px;
}
.testimonial-page .testimonial .testimonial-thumb img,
.testimonial .testimonial-thumb img {
width:50px;
height:50px;
border-radius:100%;
position:absolute;
bottom:2px;
left:8px;
}
.testimonial .testimonial-detail {
width:100%;
}
.testimonial .testimonial-detail cite {
margin-left:60px;
}
.testimonial {
position:relative;
}
.testimonials .owl-item {
padding-left:10px;
padding-right:10px;
}
.courses-table-row {
width:1200px;
}
.course-table-wrapper .columns {
overflow-x:scroll;
}
.owl-stage-outer:after {
clear:both !important;
content: ' ';
display: table;
}
.owl-stage-outer {
margin-bottom:15px;
}
.header-new .text-right {
text-align:center;
margin-top:10px !important;
}
.navigation-style-two {
background-color:#FFF;
margin-bottom:25px;
}
.navigation-style-two .search-wrap {
top:-19px;
}
.navigation-style-two .search-wrap a {
color:#174873;
}
.navigation-style-two .top-bar ul ul {
margin-top:10px;
}
.navigation-style-two .top-bar ul {
margin-top:20px;
}
.menu-icon.dark:after {
background: #174873;
box-shadow: 0 7px 0 #174873,0 14px 0 #174873;
}
.header-new .row .small-12 {
margin-top:0px;
margin-bottom:0px;
}
.header,
.nav-wrap {
position:relative !important;
}
.nav-wrap .dropdown-pane {
left:0px !important;
width:100% !important;
}
.header.header-new {
box-shadow:0px 0px;
padding-top:15px;
padding-bottom:15px;
}
.course .teacher {
padding-left:0px;
padding-right:0px;
}
.title-section .row .small-12,
.contact-form .row .small-12 {
margin-top:0px;
margin-bottom:0px;
}
.contact-form {
padding-left:10px;
padding-right:10px;
}
.post-meta {
font-size:0.75rem;
padding:5px;
}
.post-meta i {
display:none;
}
.widget .popular-post img {
width:40px;
height:40px;
}
.widget .search_field {
margin-bottom: 0px;
}
.products-page .sidebar {
margin-bottom:20px !important;
}

/*————————- 27.1 Top Navigation CSS ————————-*/

.brands-wrap .owl-controls {
margin-top:10px !important;
}

/*————————- 27.2 Footer Settings ————————-*/

.footer-widget {
margin-bottom:15px;
}
.footerbottom ul {
text-align: center;
width: 100%;
border-bottom: 0px;
}
.copyrightinfo {
text-align:center;
}
.time-table {
text-align:center;
}
.logo {
text-align:center;
margin:auto;
}
.logo-small {
text-align:center;
}
.row .small-12 {
margin-top:15px;
margin-bottom:15px;
}
.row .small-12:last-child {
margin-bottom:0px;
}
.row .small-12:first-child {
margin-top:0px;
}
.top-int-bar .small-12,
.info-boxes .small-12,
.footerbottom .small-12,
.latest-news .button, .news .small-12 {
margin-top:0px;
margin-bottom:0px;
}
.text-medium-right {
text-align:center !important;
}
.topbar .socialicons {
text-align:center;
}
.call-to-action i {
display:block;
margin:auto;
margin-bottom:15px;
}
.call-to-action h2 {
text-align:center;
}
.call-to-action h2 span {
margin-left:10px;
}
.call-to-action .button {
display:table;
margin:auto;
}
.call-to-action .button,
.woocommerce .call-to-action .button {
display:table;
margin:auto;
position:relative;
}
.sidebar .widget .menu .sub-menu {
padding-left:0px;
}
}

/* Medium only */ @media screen and (min-width: 40em) and (max-width: 63.9375em) {

.navigation-style-two {
background-color:#FFF;
margin-bottom:25px;
}
.navigation-style-two .search-wrap {
top:-19px;
}
.navigation-style-two .search-wrap a {
color:#174873;
}
.navigation-style-two .top-bar ul ul {
margin-top:10px;
}
.navigation-style-two .top-bar ul {
margin-top:20px;
}
.menu-icon.dark {
margin:11px;
}
.menu-icon.dark:after {
background: #174873;
box-shadow: 0 7px 0 #174873,0 14px 0 #174873;
}
.header-new .row .small-12 {
margin-top:0px;
margin-bottom:0px;
}
.header,
.nav-wrap {
position:relative !important;
}
.nav-wrap .dropdown-pane {
left:0px !important;
width:100% !important;
}
.header.header-new {
box-shadow:0px 0px;
padding-top:15px;
padding-bottom:15px;
}
.top-bar-title {
margin-right: 0px;
width: 20px;
margin: auto;
float:right;
margin-right:20px;
}
.top-bar ul {
width:100%;
margin-top:10px;
background-color:#174873;
position:absolute;
top:56px;
}
.top-bar ul ul {
position:relative;
top:0px;
}
.top-bar ul li a {
padding-left:15px;
color:#FFF;
}
.top-bar ul li a:hover,
.top-bar ul .is-active a,
.top-bar ul li a {
border-bottom:0px !important;
color:#FFF !important;
}
.top-bar ul li a:hover {
color:#e79800 !important;
}
.top-bar ul ul {
margin-top:0px;
}
.main-container .navigation-style-two {
background-color:transparent;
}
.is-accordion-submenu-parent>a:after {
border-color: #FFF transparent transparent;
}
.top-bar ul ul li a {
padding-left:25px;
}
.top-bar ul ul li a:before{
content:"\00BB";
margin-right:10px;
}
.top-bar {
width:calc(100% - 32px);
padding:0px;
float:left;
}
.navigation-style-two {
position:relative;
width:100%;
margin-bottom:0px;
}
.navigation-style-two:after {
clear:both;
display:table;
content:"";
}
.navigation-style-two .top-bar {
float:none;
display:inline-block;
}
.navigation-style-two .top-bar-title {
position: absolute;
left: 50%;
margin-left: -25px;
top: 50%;
margin-top: -19px;
}
.navigation-style-two .search-wrap.float-right {
float: none !important;
display: inline-block;
position: absolute;
right: 50%;
margin-right: -23px;
height: 25px;
line-height: 25px;
padding: 0px;
top: 0px;
margin-top: -8.5px;
}
.navigation-style-two .nav-wrap {
margin-bottom:25px;
}
.navigation-style-two .top-bar ul {
top:5px;
left:15px;
}
.topBar .left-side p,
.topBar .right-side p,
.topBar .left-side ul,
.topBar .right-side ul {
text-align:center;
}
.topBar p {
background-color:transparent;
text-align:center;
float:none;
padding:3px;
}
.topBar ul li {
padding:3px;
}
.topBar ul .first-social {
padding-left:15px;
}
.topBar .row .small-12 {
margin-bottom:0px;
margin-top:0px;
}
.topBar .text-right {
text-align:center;
}
.upper-background {
display: none;
}
.process .right-info {
float: left;
width: calc(100% - 85px);
}
.text-medium-right {
text-align:center !important;
}
.topbar .socialicons {
text-align:center;
}
.call-to-action i {
display:block;
margin:auto;
margin-bottom:15px;
}
.call-to-action h2 {
text-align:center;
}
.call-to-action h2 span {
margin-left:10px;
}
.call-to-action .button {
display:table;
margin:auto;
}
.call-to-action .button,
.woocommerce .call-to-action .button {
display:table;
margin:auto;
position:relative;
}
.row .medium-12:first-child,
.row .medium-6:nth-child(-n + 2) {
margin-top:0px;
}
.row .medium-12:last-child,
.row .medium-6:nth-last-child(-n + 2) {
margin-bottom:0px;
}
.top-int-bar .medium-12,
.info-boxes .medium-12,
.footerbottom .medium-12,
.latest-news .button, .news .medium-12 {
margin-top:0px;
margin-bottom:0px;
}
.row .medium-12,
.row .medium-6 {
margin-top:15px;
margin-bottom:15px;
}
.sidebar .widget .menu .sub-menu {
padding-left:0px;
}
.brands-wrap .owl-controls {
margin-top:10px !important;
}
.footer-widget {
margin-bottom:15px;
}
.footerbottom ul {
text-align: center;
width: 100%;
border-bottom: 0px;
}
.copyrightinfo {
text-align:center;
}
.time-table {
text-align:center;
}
.gallery-container .gallery-thumb {
width: 50%;
padding: 2px;
margin: 0px !important;
}
.boxed {
max-width:100%;
margin:auto;
border-left:0px;
border-right:0px;
}
.owl-prev ,
.owl-next {
position: relative !important;
}
.owl-prev:hover ,
.owl-next:hover {
position: relative !important;
}
.owl-next {
float:left !important;
right:0px !important;
margin-left:5px !important;
}
.owl-prev {
float:left !important;
left:0px !important;
margin-right:5px !important;
}
.owl-controls {
margin-top:35px !important;
}
.owl-nav {
text-align: center;
margin: auto;
width: 90px;
position: absolute;
left: 50%;
margin-left: -45px;
}
}

4/ Kết luận Qua bài viết này mình hi vọng có thể giúp cho các bạn thường hay sửa code wordpress có thêm một cách để chỉnh sửa css website nữa, chúc bạn có một trang web đẹp, thu hút được nhiều người đọc.