@charset "UTF-8"; /* Template Name: Transform Template URI: http://www.os-templates.com/ Description: Designed and Built by OS Templates. This modern template is adaptable, lightweight and fully customisable. The template is easy to use, enabling you to create your site within minutes. Version: 1.0.1 Author: OS-Templates.com Author URI: http://www.os-templates.com/ Copyright: OS-Templates.com Licence: Single Site Licence URI: http://www.os-templates.com/template-terms File: Pages CSS */ /* TOC - Table Of Contents 01 => Site Wide Shared Classes 02 => Homepage 03 => Blog Overview 04 => Blog Post Single 05 => Gallery 06 => 404 07 => About Us 08 => Clients 09 => Coming Soon */ /* Site Wide Shared Classes ---------------------------------------------------------------------------------------------------------------------------------------*/ .post-image{margin-bottom:40px;} .blog-post-title a{} .blog-post-title a:hover{} .blog-post-meta{font-size:.8em;} .blog-post-meta ul{margin:0; padding:0; list-style:none;} .blog-post-meta ul li{} .blog-post-meta ul li:first-child{} .blog-post-meta ul li.blog-post-author{} /* Author Name */ .blog-post-meta ul li.blog-post-date{} /* Date */ .blog-post-meta ul li.blog-post-cats{} /* Post Categories - comma delimiter */ .blog-post-meta ul li.blog-post-comcnt{} /* Comment Count */ /* Homepage ---------------------------------------------------------------------------------------------------------------------------------------*/ .reasons, .latestlist{} .reasons li, .latestlist li{position:relative; margin:0 0 30px 0; padding:0 0 30px 0; border-bottom:1px solid;} .reasons li{padding-left:70px;} .reasons li:last-child, .latestlist li:last-child{margin:0; padding-bottom:0; border:none;} .reasons .numb{display:inline-block; position:absolute; left:0; font-size:70px; line-height:.85em;} .hpcircle, .hpcircle span{display:block; border-radius:50%; background-clip:padding-box;} .hpcircle{width:290px; height:290px; margin:0 auto; padding:10px; border:5px solid;} .hpcircle span{width:100%; height:100%; line-height:260px; font-size:120px;} /* Blog Overview ---------------------------------------------------------------------------------------------------------------------------------------*/ #blog-posts #blog-overview{display:block; width:100%;} #blog-posts #blog-overview .blog-post-excerpt{margin-bottom:50px;} #blog-posts #blog-overview .blog-post-excerpt .post-image{margin-bottom:0;} #blog-posts #blog-overview .blog-post-excerpt .post-image img{} #blog-posts #blog-overview .blog-post-excerpt .post-content{position:relative; padding:50px 30px 30px 30px; border:solid; border-width:0 1px 1px 1px;} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-type{display:block; position:absolute; top:-30px; width:60px; height:60px; border:1px solid; border-radius:50%; font-size:26px; line-height:60px; text-align:center;} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-type.left{left:30px;} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-type.centre{left:50%; margin-left:-30px;} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-type.right{right:30px;} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-title{margin-bottom:0;} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-title a{} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-title a:hover{} #blog-posts #blog-overview .blog-post-excerpt .post-content .read-more{} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-meta{} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-meta ul{} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-meta ul li{display:inline; margin-left:5px; padding-left:8px; border:solid; border-width:0 0 0 1px;} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-meta ul li:first-child{margin-left:0; padding:0; border:none;} #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-meta ul li.blog-post-author{} /* Author Name */ #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-meta ul li.blog-post-date{} /* Date */ #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-meta ul li.blog-post-cats{} /* Post Categories - comma delimiter */ #blog-posts #blog-overview .blog-post-excerpt .post-content .blog-post-meta ul li.blog-post-comcnt{} /* Comment Count */ /* Blog Post Single ---------------------------------------------------------------------------------------------------------------------------------------*/ #blog-post{} #blog-post .post-content-wrapper{margin-bottom:50px;} #blog-post .post-content-wrapper .post-image{margin-bottom:0;} #blog-post .post-content-wrapper .post-image img{} #blog-post .post-content-wrapper .post-content{position:relative; margin-bottom:50px; padding:30px; border:solid; border-width:0 1px 1px 1px;} #blog-post .post-content-wrapper .post-content .blog-post-title{margin-bottom:0;} #blog-post .post-content-wrapper .post-content :last-child{margin-bottom:0;} #blog-post .post-content-wrapper .post-content .blog-post-meta{} #blog-post .post-content-wrapper .post-content .blog-post-meta ul{} #blog-post .post-content-wrapper .post-content .blog-post-meta ul li{display:inline; margin-left:5px; padding-left:8px; border:solid; border-width:0 0 0 1px;} #blog-post .post-content-wrapper .post-content .blog-post-meta ul li:first-child{margin-left:0; padding:0; border:none;} #blog-post .post-content-wrapper .post-content .blog-post-meta ul li.blog-post-author{} /* Author Name */ #blog-post .post-content-wrapper .post-content .blog-post-meta ul li.blog-post-date{} /* Date */ #blog-post .post-content-wrapper .post-content .blog-post-meta ul li.blog-post-cats{} /* Post Categories - comma delimiter */ #blog-post .post-content-wrapper .post-content .blog-post-meta ul li.blog-post-comcnt{} /* Comment Count */ #blog-post .blog-post-tags{margin-bottom:50px;} #blog-post .blog-post-tags li{} #blog-post .blog-post-tags li:last-child{} #blog-post .blog-post-tags li a{} #blog-post .post-author-bio{margin-bottom:50px;} #blog-post .post-author-bio .post-author-image{float:left; margin-right:15px;} #blog-post .post-author-bio .post-author-about{line-height:1.6em;} #blog-post .post-author-bio .post-author-about span{display:block; margin-bottom:8px; text-transform:uppercase;} #blog-post .blog-post-related{margin-bottom:50px;} #blog-post .blog-post-related sup{vertical-align:baseline;} #blog-post .blog-post-related ul{margin:0; padding:0;} #blog-post .blog-post-related ul li{margin-bottom:0;} #blog-post .blog-post-related ul.nospace.spacing li{margin-bottom:25px;} #blog-post .blog-post-related ul.nospace.spacing li:last-child{margin-bottom:0;} #blog-post #comment-count{display:block; margin:0 0 50px 0; padding:15px; border:1px solid;} #blog-post #comment-count .fl_left{font-weight:bold;} #blog-post #comment-list{} #blog-post #comment-list ul:first-child{margin-bottom:50px;} #blog-post #comment-list ul.list.block li > ul{margin-top:25px; margin-bottom:25px;} #blog-post #comment-list .comment-wrapper{display:block; width:100%;} #blog-post #comment-list .comment-wrapper .comment-meta div{float:left; margin-right:15px; line-height:normal;} #blog-post #comment-list .comment-wrapper .comment-meta div:last-child{margin-right:0;} #blog-post #comment-list .comment-wrapper .comment-meta .comment-avatar{} #blog-post #comment-list .comment-wrapper .comment-meta .comment-avatar img{max-width:52px; max-height:52px; padding:2px; border:1px solid;} #blog-post #comment-list .comment-wrapper .comment-meta .comment-author{padding:10px 0 0 0;} #blog-post #comment-list .comment-wrapper .comment-meta .comment-author address{margin:0 0 5px 0;} #blog-post #comment-list .comment-wrapper .comment-meta .comment-author .comment-date{font-size:11px;} #blog-post #comment-list .comment-wrapper .comment-meta .comment-author .comment-date time{float:left; margin-right:10px;} #blog-post #comment-list .comment-wrapper .comment-meta .comment-author .comment-date time sup{} #blog-post #comment-list .comment-wrapper .comment-meta .comment-author .comment-date .comment-reply{float:left; margin:0; padding:0 0 0 10px; border:solid; border-width:0 0 0 1px; text-transform:uppercase;} #blog-post #comment-list .comment-wrapper .comment-content{} /* Gallery ---------------------------------------------------------------------------------------------------------------------------------------*/ #gallery{} #gallery figure{margin-bottom:50px;} #gallery figure h2{} #gallery figure ul{margin:0; padding:0; list-style:none;} #gallery figure ul li{margin-bottom:30px;} #gallery figure ul li a{display:block; position:relative;} #gallery figure ul li a:before{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; background-color:rgba(0,0,0,.6);} #gallery figure ul li a:after{display:block; text-align:center; vertical-align:middle; position:absolute; top:50%; left:50%; width:36px; height:36px; margin:-18px 0 0 -18px; padding:0; font-family:"Font Awesome\ 5 Free"; font-weight:900; content:"\f31e"; font-size:36px; line-height:36px;} #gallery figure ul li a:before, #gallery figure ul li a:after{opacity:0;} #gallery figure ul li a:hover:before, #gallery figure ul li a:hover:after{opacity:1;} #gallery figure ul li img{} #gallery figure figcaption{} /* 404 ---------------------------------------------------------------------------------------------------------------------------------------*/ #fof{display:block; margin:0; padding:100px 0 20px 0; text-align:center;} #fof h1, #fof h2{margin:0; padding:0;} #fof h1{margin-top:-150px; font-size:15em;} #fof h2{font-size:3.5em;} #fof p{margin:0; padding:0;} #fof p.notice{display:block; width:100%; margin-bottom:50px; clear:both; font-weight:bold; text-transform:uppercase;} /* About Us ---------------------------------------------------------------------------------------------------------------------------------------*/ figure.team-member{} figure.team-member img{} figure.team-member figcaption{} figure.team-member figcaption p{margin:15px 0 0 0; padding:0;} figure.team-member figcaption .team-name{font-weight:bold;} figure.team-member figcaption .team-title{display:block; margin:0 0 15px 0; font-size:11px; line-height:normal; font-style:normal;} /* Clients ---------------------------------------------------------------------------------------------------------------------------------------*/ .clients{border:solid; border-width:0 1px 1px 0; text-align:center;} .clients div{display:block; position:relative; padding:20px; border:solid; border-width:1px 0 0 1px;} .clients div a{} /* 60% until mouse hover - remove if not wanted */ .clients div{opacity:0.6; filter:alpha(opacity=60);} .clients div:hover{opacity:1; filter:alpha(opacity=100);} /* Coming Soon ---------------------------------------------------------------------------------------------------------------------------------------*/ .comingsoon #logo{float:none; margin:0 0 80px 0; padding:0; clear:none; text-transform:uppercase;} .comingsoon #logo *, .comingsoon .notice{margin:0; padding:0; font-size:120px; line-height:1.2em;} .comingsoon #logo span{font-size:100px;} .comingsoon .notice{font-size:40px;} .comingsoon #cs-time{margin:10px 0 30px 0; padding:0;}