/* Latest News area css ============================================================================================ */ .latest_news_area{ padding: 110px 0px; .main_title{ padding-bottom: 60px; } } .l_news_item{ padding-right: 66px; .media{ .media-left{ padding-right: 24px; .post_date{ position: relative; h4{ font-size: 80px; color: #e2e7e6; font-family: $os; } h5{ font-size: 18px; color: #000000; font-family: $os; font-weight: 300; position: absolute; top: 50%; transform: translateY(-50%); left: 0px; width: 100%; text-align: center; } } } .media-body{ a{ h4{ font-size: 16px; line-height: 26px; font-family: $os; color: #000; text-transform: none; padding-bottom: 10px; } } a{ font-size: 14px; text-transform: uppercase; color: $baseColor; font-family: $os; font-weight: 300; span{ padding: 0px 4px; } } p{ font-size: 14px; line-height: 24px; color: #a1a1a1; font-family: $op; padding-top: 20px; } } } &.l_news_item_r{ padding-left: 68px; padding-right: 0px; } } /* End Latest News area css ============================================================================================ */ /* Latest News style2 area css ============================================================================================ */ .latest_news_s2{ padding: 110px 0px; .main_title{ padding-bottom: 25px; } .l_news_s2_item{ margin-top: 30px; .media{ .media-left{ padding-right: 30px; .date_news{ background: $baseColor; text-align: center; text-transform: uppercase; width: 100px; padding: 30px 0px; h3{ font-size: 55px; font-family: $os; color: #fff; padding-bottom: 5px; } h5{ font-size: 18px; color: #fff; font-family: $os; } } .news_year{ background: #31353d; width: 100px; text-align: center; padding: 18px 0px; h4{ font-size: 25px; text-transform: uppercase; color: #fff; } } } .media-body{ h4{ font-size: 18px; font-family: $os; text-transform: uppercase; color: $dip; padding-bottom: 15px; } a{ color: $baseColor; font-size: 14px; font-family: $os; } p{ font-size: 14px; color: #6a6a6a; font-family: $op; line-height: 25px; padding-top: 23px; } } } } &.latest_news_s3{ .main_title{ margin-bottom: 50px; } } } .l_item_area{ .l_image{ position: relative; overflow: hidden; z-index: 2; img{ max-width: 100%; } &:before{ content: ''; background: rgba(0, 0, 0, .50); width: 100%; height: 100%; left: 0px; top: -100%; position: absolute; z-index: 1; transition: all 200ms ease-in; } .hover_icon{ position: absolute; left: 0px; top: 50%; z-index: 2; text-align: center; width: 100%; margin-top: -27.5px; transform: scale(0); transition: all 600ms linear; } } .l_content{ background: #f1f1f1; padding: 0px 28px; @include transition; h4{ font-family: $os; font-size: 20px; text-transform: uppercase; color: #393939; letter-spacing: .5px; padding-top: 28px; padding-bottom: 10px; } .parmanent{ font-size: 11.5px; font-family: $os; color: #393939; letter-spacing: .2875px; margin-right: 12px; & + a{ & + a{ margin-right: 0px; } } } p{ font-family: $op; font-size: 14px; line-height: 24px; color: #393939; padding-top: 25px; padding-bottom: 135px; } .read_more_l{ font-size: 14px; color: #393939; text-transform: uppercase; font-family: "monB"; letter-spacing: .35px; i{ font-weight: bold; padding-left: 5px; } } } &:hover{ .l_image{ &:before{ top: 0; } .hover_icon{ transform: scale(1); } } .l_content{ background: $baseColor; h4{ color: #fff; } .parmanent{ color: #fff; } p{ color: #fff; } .read_more_l{ color: #fff; } } } } /* End Latest News style2 area css ============================================================================================ */ /* Blog Zig area css ============================================================================================ */ .blog_zig_area{ padding: 110px 0px; .blog_zig_img_left{ margin-right: -15px; img{ max-width: 100%; } } .blog_zig_img_right{ margin-left: -15px; img{ max-width: 100%; } } .blog_zig_content_left{ padding-left: 15px; padding-top: 122px; h5{ font-size: 14px; font-family: $os; color: #aaaaaa; font-weight: normal; span{ font-weight: bold; color: $pfont; } } h4{ font-family: $os; font-weight: bold; color: #252525; font-size: 22px; padding: 20px 0px 30px 0px; } p{ font-size: 14px; line-height: 25px; color: #6b6b6b; font-family: $op; padding-bottom: 30px; } } .blog_zig_content_right{ padding-right: 15px; padding-top: 122px; h5{ font-size: 14px; font-family: $os; color: #aaaaaa; font-weight: normal; span{ font-weight: bold; color: $pfont; } } h4{ font-family: $os; font-weight: bold; color: #252525; font-size: 22px; padding: 20px 0px 30px 0px; } p{ font-size: 14px; line-height: 25px; color: #6b6b6b; font-family: $op; padding-bottom: 30px; } } } .blog_pagination{ text-align: right; padding-top: 80px; ul{ li{ display: inline-block; margin-right: 7px; a{ border: 2px solid #d9d9d9; font-size: 16px; color: #1e1e1e; display: inline-block; padding: 3px 10px; font-family: $op; font-weight: 600; @include transition; } &:nth-child(3){ margin-right: 0px; } &:nth-child(4){ margin-right: 0px; a{ padding: 0px 10px; border: none; line-height: 7px; vertical-align: bottom; } } &:last-child{ margin-right: 0px; } &:hover{ a{ border-color: $baseColor; } } } } } /* End Blog Zig area css ============================================================================================ */ /* Blog Details area css ============================================================================================ */ .blog_details_area{ padding: 110px 0px; .blog_img_area_s{ display: inline-block; padding-right: 100px; position: relative; img{ max-width: 100%; } .blog_social{ display: inline-block; position: absolute; right: 0px; top: 125px; li{ margin-bottom: 30px; a{ color: #cccccc; font-size: 14px; @include transition } &:last-child{ margin-bottom: 0px; } &:hover{ a{ color: $baseColor; } } } } } } .blog_details_content{ padding-right: 100px; h3{ font-size: 48px; color: $black; font-family: $op; font-weight: 900; padding: 55px 0px 10px 0px; } h4{ font-size: 11px; color: #cccccc; font-family: $os; font-weight: 300; text-transform: uppercase; a{ color: #cccccc; &:hover{ color: $baseColor; } } } h5{ font-size: 16px; line-height: 24px; font-family: $op; color: $black; font-weight: bold; padding: 25px 0px 30px 0px; } p{ font-size: 14px; line-height: 24px; font-family: $op; color: #a1a1a1; padding-bottom: 30px; & + p{ padding-bottom: 0px; } } .blog_quot{ h6{ font-size: 24px; font-weight: bold; font-style: italic; font-family: $op; max-width: 910px; margin: auto; padding: 30px 0px 35px 0px; } } } .blog_column_2{ p{ padding-right: 100px; font-size: 14px; line-height: 24px; font-family: $op; color: #a1a1a1; padding-bottom: 30px; &:last-child{ padding-bottom: 0px; padding-top: 30px; } } .row{ .blog_column_content{ p{ padding-bottom: 12px; & + p{ padding-top: 0px; padding-bottom: 0px; } } } } } .tags_area{ padding-right: 100px; padding-top: 60px; .tags_list{ h4{ display: inline-block; font-size: 14px; font-family: $os; text-transform: uppercase; padding-right: 17px; } a{ font-size: 12px; font-family: $op; font-weight: 600; text-transform: uppercase; color: #cccccc; margin-right: 10px; @include transition; &:last-child{ margin-right: 0px; } &:hover{ color: $black; } } } .social_list{ a{ font-size: 12px; font-family: $op; font-weight: 600; text-transform: uppercase; color: #cccccc; margin-right: 18px; @include transition; &:last-child{ margin-right: 0px; } &:hover{ color: $black; } } } } .author_information{ clear: both; overflow: hidden; padding-right: 100px; padding-top: 75px; padding-bottom: 75px; .media{ .media-left{ padding-right: 50px; } .media-body{ h4{ font-size: 14px; color: $black; font-family: $os; text-transform: uppercase; padding-bottom: 20px; } p{ font-size: 14px; line-height: 24px; font-family: $op; letter-spacing: .28px; color: #a1a1a1; padding-bottom: 30px; } a{ color: #cccccc; font-size: 16px; margin-right: 20px; &:last-child{ margin-right: 0px; } &:hover{ color: $baseColor; } } } } } .comment_area{ padding-right: 100px; h3{ font-size: 14px; color: $baseColor; font-family: $os; text-transform: uppercase; color: $black; } .media{ margin-bottom: 30px; .media-left{ padding-right: 28px; } .media-body{ h4{ display: inline-block; font-size: 18px; color: $black; font-family: $op; font-weight: 600; font-style: italic; } a{ float: right; text-transform: uppercase; color: $black; font-family: $os; font-weight: 300; font-size: 12px; letter-spacing: 2.4px; } p{ font-size: 14px; color: #a1a1a1; font-family: $op; line-height: 24px; padding-top: 20px; } } &.comment_reply{ padding-left: 80px; max-width: 756px; .media-body{ .form-group{ position: relative; textarea{ border-left: 0px; border-right: 0px; border-top: 0px; box-shadow: none; resize: none; border-radius: 0px; border-bottom: 1px solid #e1e1e1; padding-bottom: 10px; @include placeholder{ font-size: 14px; color: #c2c2c2; font-family: $op; } } a{ position: absolute; right: 0px; top: 0px; } } } } &:last-child{ margin-bottom: 0px; } } } .comment_area_form{ padding-right: 100px; padding-top: 70px; h4{ font-size: 14px; color: $black; font-family: $os; text-transform: uppercase; padding-bottom: 45px; } .form-group{ margin-bottom: 0px; input{ border-left: 0px; border-right: 0px; border-top: 0px; box-shadow: none; border-radius: 0px; border-bottom: 1px dashed #e1e1e1; box-shadow: none; padding-bottom: 15px; font-size: 14px; color: #c2c2c2; font-family: $op; @include placeholder{ font-size: 14px; color: #c2c2c2; font-family: $op; } &:focus{ border-bottom: 1px dashed $baseColor; } } textarea{ border-left: 0px; border-right: 0px; border-top: 0px; box-shadow: none; resize: none; border-radius: 0px; border-bottom: 1px dashed #e1e1e1; padding-bottom: 10px; height: 115px; margin-top: 40px; font-size: 14px; color: #c2c2c2; font-family: $op; @include placeholder{ font-size: 14px; color: #c2c2c2; font-family: $op; } &:focus{ border-bottom: 1px dashed $baseColor; } } &:nth-child(2){ padding-right: 50px; } &:nth-child(3){ padding-left: 50px; } } .btn_custom_blue{ margin-top: 60px; float: right; } } /* End Blog Details area css ============================================================================================ */