@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: Elements CSS */ /* TOC - Table Of Contents 01 => Base Colours 02 => Call To Action 03 => Underlined Headlines 04 => Lists - ul + ol 05 => Dividers 06 => Dropcaps 07 => Blockquotes / Quotes 08 => Buttons 09 => Alert Messages 10 => Jquery Accordion + Jquery Toggle 11 => Jquery Tabs 12 => Pricing Tables 13 => Skillset 14 => Forms 15 => Tables 16 => Font Awesome Additions 17 => Social Icons 18 => Media Container 19 => Circles 20 => Opacity 21 => Transparent 22 => Rounded Corners 23 => Code Blocks 24 => Testimonials 25 => Widgets 26 => Timeline 27 => Services 28 => Google Maps */ /* Base Colours ---------------------------------------------------------------------------------------------------------------------------------------*/ .blue{color:#56AED4;} .black{color:#000000;} .green{color:#86AE28;} .grey{color:#A8A8A8;} .dkgrey{color:#333333;} .maroon{color:#800000;} .orange{color:#FF9900;} .purple{color:#9F81A9;} .red{color:#D54346;} .turquoise{color:#50C6C6;} .yellow{color:#FFC600;} .white{color:#FFFFFF;} [class^="bg_"], [class*=" bg_"]{color:#FFFFFF;} .bg_blue{background-color:#56AED4;} .bg_black{background-color:#000000;} .bg_green{background-color:#86AE28;} .bg_grey{background-color:#A8A8A8;} .bg_dkgrey{background-color:#333333;} .bg_maroon{background-color:#800000;} .bg_orange{background-color:#FF9900;} .bg_purple{background-color:#9F81A9;} .bg_red{background-color:#D54346;} .bg_turquoise{background-color:#50C6C6;} .bg_yellow{background-color:#FFC600;} .bg_white{color:#666666; background-color:#FFFFFF;} [class^="bd_"], [class*=" bd_"]{border:1px solid;} .bd_blue{border-color:#56AED4;} .bd_black{border-color:#000000;} .bd_green{border-color:#86AE28;} .bd_grey{border-color:#A8A8A8;} .bd_dkgrey{border-color:#333333;} .bd_maroon{border-color:#800000;} .bd_orange{border-color:#FF9900;} .bd_purple{border-color:#9F81A9;} .bd_red{border-color:#D54346;} .bd_turquoise{border-color:#50C6C6;} .bd_yellow{border-color:#FFC600;} .bd_white{border-color:#FFFFFF;} /* Call To Action - Best used as a full width banner ---------------------------------------------------------------------------------------------------------------------------------------*/ .calltoaction{display:block; padding:30px; text-transform:uppercase;} .container .calltoaction .cta-header{margin:0; padding:0; text-transform:none;} .calltoaction p{margin:0; padding:0; text-transform:none;} .calltoaction .button{display:block; text-align:center;} .calltoaction.opt1, .calltoaction.opt2, .calltoaction.opt3{border:solid;} .calltoaction.opt1{border-width:0 0 0 5px;} .calltoaction.opt2{border-width:0 5px 0 0;} .calltoaction.opt3{border-width:0 5px;} /* Underlined Headlines ---------------------------------------------------------------------------------------------------------------------------------------*/ h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{display:block; position:relative; padding-bottom:5px; border-bottom:1px solid;} h1 span:before, h2 span:before, h3 span:before, h4 span:before, h5 span:before, h6 span:before{} h1 span:after, h2 span:after, h3 span:after, h4 span:after, h5 span:after, h6 span:after{display:block; position:absolute; bottom:-2px; left:0; width:40px; height:3px; content:"";} /* In use with Font Awesome we must override */ /* Sadly due to how Font Awesome have (in v5.x) changed their naming system, we now get code bloat */ h1 span[class^="fab"], h1 span[class^="far"], h1 span[class^="fas"], h2 span[class^="fab"], h2 span[class^="far"], h2 span[class^="fas"], h3 span[class^="fab"], h3 span[class^="far"], h3 span[class^="fas"], h4 span[class^="fab"], h4 span[class^="far"], h4 span[class^="fas"], h5 span[class^="fab"], h5 span[class^="far"], h5 span[class^="fas"], h6 span[class^="fab"], h6 span[class^="far"], h6 span[class^="fas"]{padding-bottom:0; border-bottom:none;} h1 span[class^="fab"]::before, h1 span[class^="far"]::before, h1 span[class^="fas"]::before, h2 span[class^="fab"]::before, h2 span[class^="far"]::before, h2 span[class^="fas"]::before, h3 span[class^="fab"]::before, h3 span[class^="far"]::before, h3 span[class^="fas"]::before, h4 span[class^="fab"]::before, h4 span[class^="far"]::before, h4 span[class^="fas"]::before, h5 span[class^="fab"]::before, h5 span[class^="far"]::before, h5 span[class^="fas"]::before, h6 span[class^="fab"]::before, h6 span[class^="far"]::before, h6 span[class^="fas"]::before{} h1 span[class^="fab"]::after, h1 span[class^="far"]::after, h1 span[class^="fas"]::after, h2 span[class^="fab"]::after, h2 span[class^="far"]::after, h2 span[class^="fas"]::after, h3 span[class^="fab"]::after, h3 span[class^="far"]::after, h3 span[class^="fas"]::after, h4 span[class^="fab"]::after, h4 span[class^="far"]::after, h4 span[class^="fas"]::after, h5 span[class^="fab"]::after, h5 span[class^="far"]::after, h5 span[class^="fas"]::after, h6 span[class^="fab"]::after, h6 span[class^="far"]::after, h6 span[class^="fas"]::after{display:none;} /* Lists - ul + ol ---------------------------------------------------------------------------------------------------------------------------------------*/ ul.nospace, ol.nospace{list-style:none;} .nospace.inline li{display:inline-block;} .nospace.spacing li{margin-bottom:25px;} .nospace.spacing li:last-child{margin-bottom:0;} .list{margin:10px 0; padding:0; list-style-position:inside;} .list.indent{margin-left:20px;} .list li{margin:6px 0 0 0; padding:0;} .list li:first-child{margin-top:0;} .list li > ul, .list li > ol{margin:8px 0 8px 30px;} .list.archives.blue a{color:#56AED4;} .list.archives.green a{color:#86AE28;} .list.archives.grey a{color:#A8A8A8;} .list.archives.dkgrey a{color:#333333;} .list.archives.maroon a{color:#800000;} .list.archives.orange a{color:#FF9900;} .list.archives.purple a{color:#9F81A9;} .list.archives.red a{color:#D54346;} .list.archives.turquoise a{color:#50C6C6;} .list.archives.yellow a{color:#FFC600;} .list.disc{list-style-type:disc;} .list.roman{list-style-type:upper-roman;} .list.alpha{list-style-type:upper-alpha;} .list.decimal{list-style-type:decimal;} .list.doughnut{list-style-type:circle;} .list.none, .list.block, .list.tick, .list.arrow, .list.tagcloud, .list.underline{list-style-type:none;} .list.block li > ul, .list.block li > ol{padding:0 0 0 10px; list-style:none; border:solid; border-width:0 0 0 1px;} .list.tick li, .list.tick li .list.tick li, .list.arrow li, .list.arrow li .list.arrow li{position:relative; padding-left:22px;} .list.tick li:before, .list.arrow li:before, .list.tick li:after, .list.arrow li:after{position:absolute; top:0; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size:13px;} .list.tick li:before, .list.arrow li:before{left:0;} .list.tick li:before, .list.tick li .list.tick li:before{content:"\f00c";} .list.arrow li:before, .list.arrow li .list.arrow li:before{content:"\f061";} /* Override, otherwise all nested li elements have the tick or arrow */ .list.tick li ul, .list.arrow li ul{margin:inherit; padding:inherit;} .list.tick li li, .list.arrow li li{position:relative; padding-left:0;} .list.tick li li:before, .list.arrow li li:before{content:"";} .list.underline li{margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid;} .list.underline li:last-child{margin-bottom:0;} .list.tagcloud li{display:inline-block; margin:0 5px 5px 0;} .list.tagcloud li a{display:block; padding:4px 10px; text-transform:capitalize;} .list.tagcloud.rnd5 a{border-radius:5px;} .list.tagcloud.rnd8 a{border-radius:8px;} .list.tagcloud.rnd10 a{border-radius:10px;} .list.tagcloud.rnd12 a{border-radius:12px;} .list.posttags{margin:0; padding:0 0 0 12px; list-style:none;} .list.posttags li{display:inline-block; position:relative; margin:0 15px 5px 0; text-transform:capitalize;} .list.posttags li:last-child{margin-right:0;} .list.posttags li a{display:block; position:relative; padding:5px 12px; font-size:11px; line-height:normal;} .list.posttags li a:before{position:absolute; top:0; left:-12px; bottom:0; content:""; border-style:solid; border-width:12px 12px 12px 0; border-color:transparent;} .list.posttags li a:after{position:absolute; top:10px; left:0; width:4px; height:4px; content:""; background:#FFFFFF; border-radius:2px; box-shadow:-1px -1px 2px #000;} .list.posttags.rnd5 li a{border-radius:0 5px 5px 0;} .list.posttags.rnd8 li a{border-radius:0 8px 8px 0;} .list.posttags.rnd10 li a{border-radius:0 10px 10px 0;} .list.posttags.rnd12 li a{border-radius:0 12px 12px 0;} /* Dividers ---------------------------------------------------------------------------------------------------------------------------------------*/ hr, .divider1, .divider2, .divider3{display:block; width:100%; height:20px; margin:30px 0; padding:0; border-top:1px; clear:both;} .divider1{border-top-style:solid;} .divider2{border-top-style:dotted;} .divider3{border-top-style:dashed;} hr{height:1px; margin:25px 0; border:none;} /* Dropcaps ---------------------------------------------------------------------------------------------------------------------------------------*/ .dropcap{display:block; float:left; clear:left; margin:0 10px 0 0; padding:10px 15px; font-size:28px; line-height:1.2em; font-weight:bold; text-align:center; border:1px solid;} /* Blockquotes / Quotes ---------------------------------------------------------------------------------------------------------------------------------------*/ blockquote, q{} blockquote:before, q:before, blockquote:after, q:after{quotes:none;} blockquote, blockquote:before, blockquote:after{border:solid;} blockquote{display:block; width:auto; margin:15px 0; padding:15px; border-width:0 0 0 5px; text-transform:none; font-style:normal;} /* Buttons ---------------------------------------------------------------------------------------------------------------------------------------*/ .button{display:inline-block; font-weight:normal; line-height:normal;} .button.small{font-size:.9em; padding:5px 15px;} .button.medium{font-size:1.1em; padding:8px 15px;} .button.large{font-size:1.4em; padding:10px 22px;} .button, .button:hover{color:#FFFFFF;} .button.black{background-color:#000000;} .button.black:hover{background-color:#232323;} .button.blue{background-color:#56AED4;} .button.blue:hover{background-color:#34495E;} .button.green{background-color:#86AE28;} .button.green:hover{background-color:#C0E079;} .button.grey{background-color:#A8A8A8;} .button.grey:hover{background-color:#C9C9C9;} .button.maroon{background-color:#800000;} .button.maroon:hover{background-color:#400000;} .button.orange{background-color:#FF9900;} .button.orange:hover{background-color:#B76D00;} .button.purple{background-color:#9F81A9;} .button.purple:hover{background-color:#795984;} .button.red{background-color:#D54346;} .button.red:hover{background-color:#7A1B1D;} .button.turquoise{background-color:#50C6C6;} .button.turquoise:hover{background-color:#287B7B;} .button.white{color:#666666; background-color:#FFFFFF; border:1px solid #E0E0E0;} .button.white:hover{color:#666666; background-color:#EFEFEF;} .button.yellow{background-color:#FFC600;} .button.yellow:hover{background-color:#D2A402;} /* Alert Messages ---------------------------------------------------------------------------------------------------------------------------------------*/ .alert-msg{display:block; position:relative; margin:15px 0; padding:15px 20px; border:1px solid;} .alert-msg a{background-color:transparent;} .alert-msg.info{background-color:#FFFFFF; border-color:#EFEFEF;} .alert-msg.warning{background-color:#FEE794; border-color:#FDC703;} .alert-msg.success{background-color:#C2E4CD; border-color:#76C38F;} .alert-msg.error{background-color:#F3CBCC; border-color:#D54346;} .alert-msg .close{position:absolute; top:18px; right:15px;} /* Same colour as the border - unless to light */ .alert-msg.info .close{color:#A8A8A8;} .alert-msg.warning .close{color:#FDC703;} .alert-msg.success .close{color:#76C38F;} .alert-msg.error .close{color:#D54346;} /* Jquery Accordion + Jquery Toggle ---------------------------------------------------------------------------------------------------------------------------------------*/ .accordion-wrapper, .toggle-wrapper{display:block; position:relative; width:100%; margin-top:15px;} .accordion-wrapper:first-child, .toggle-wrapper:first-child{margin-top:0;} .accordion-wrapper .accordion-title, .accordion-wrapper .accordion-title.active, .toggle-wrapper .toggle-title, .toggle-wrapper .toggle-title.active{display:block; position:relative; padding:0 0 0 34px; border:1px solid;} .accordion-wrapper .accordion-title span, .accordion-wrapper .accordion-title.active span, .toggle-wrapper .toggle-title span, .toggle-wrapper .toggle-title.active span{display:block; padding:8px 15px; border:solid; border-width:0 0 0 1px;} .accordion-wrapper .accordion-title:before, .toggle-wrapper .toggle-title:before, .accordion-wrapper .accordion-title.active:before, .toggle-wrapper .toggle-title.active:before{position:absolute; top:9px; left:9px; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size:20px;} .accordion-wrapper .accordion-title:before, .toggle-wrapper .toggle-title:before{content:"\f067";} .accordion-wrapper .accordion-title.active:before, .toggle-wrapper .toggle-title.active:before{content:"\f068";} .accordion-wrapper .accordion-content, .toggle-wrapper .toggle-content{display:none; padding:15px 32px; border:solid; border-width:0 1px 1px 1px;} .widget-wrapper .accordion-wrapper .accordion-content, .widget-wrapper .toggle-wrapper .toggle-content{padding:5px 15px 0 15px;} /* Jquery Tabs ---------------------------------------------------------------------------------------------------------------------------------------*/ .tab-wrapper{display:block; width:100%;} .tab-wrapper .tab-nav{position:relative; margin:0; padding:0; list-style:none;} .tab-wrapper .tab-nav li{display:inline-block; float:left; margin:0 -1px -1px 0;} .tab-wrapper .tab-nav li a{display:block; padding:10px 20px; border:1px solid;} .tab-wrapper .tab-nav li a:hover, .tab-wrapper .tab-nav li.ui-tabs-active a{color:inherit;} .tab-wrapper .tab-nav li.ui-tabs-active a{cursor:default;} .tab-wrapper .tab-container{display:block; padding:20px 25px 15px 25px; border:1px solid;} .tab-wrapper .tab-container .tab-content{} .tab-wrapper .tab-container .tab-content :first-child{margin-top:0;} .widget-wrapper .tab-wrapper .tab-nav li a{padding:10px 15px;} .widget-wrapper .tab-wrapper .tab-container{padding:15px 15px 0 15px;} /* Pricing Tables ---------------------------------------------------------------------------------------------------------------------------------------*/ .pricingtable-wrapper{padding:0 30px; text-align:center; line-height:normal; border:1px solid;} .pricingtable-wrapper .pricingtable{display:block;} .pricingtable-wrapper .pricingtable .pricingtable-title{} .container .pricingtable-title h2{margin:0; padding:20px 5px; text-transform:uppercase;} .pricingtable-wrapper .pricingtable .pricingtable-list{} .pricingtable-wrapper .pricingtable .pricingtable-list ul{} .pricingtable-wrapper .pricingtable .pricingtable-list ul li{padding:10px 5px; border:solid; border-width:1px 0 0 0;} .pricingtable-wrapper .pricingtable .pricingtable-list ul li:first-child{border:none;} .pricingtable-wrapper .pricingtable .pricingtable-price{padding:15px 5px; font-size:26px;} .pricingtable-wrapper .pricingtable .pricingtable-price sup{font-size:.5em;} .pricingtable-wrapper .pricingtable .pricingtable-price span{display:block; margin:-5px 0 0 0; font-size:.5em;} .pricingtable-wrapper .pricingtable .pricingtable-signup{padding:20px 10px;} .pricingtable-wrapper .pricingtable .pricingtable-signup a{display:block; padding:15px; font-size:18px;} /* Skillset ---------------------------------------------------------------------------------------------------------------------------------------*/ .skillset{margin:0 0 inherit 0; padding:0; list-style:none;} .skillset li, .skillset div{margin:8px 0 0 0;} .skillset li:first-child, .skillset div:first-child{margin-top:0;} .skillset strong{display:block; margin:0 0 2px 0;} .skillset span{display:block; margin:0; padding:0;} .skillset em{display:block; white-space:nowrap; min-height:11px; padding:2px; font-weight:normal; font-style:normal; line-height:normal;} .skillset em{color:#FFFFFF; background-color:#333333;} .skillset .bg_blue{background-color:#56AED4;} .skillset .bg_black{background-color:#000000;} .skillset .bg_green{background-color:#86AE28;} .skillset .bg_grey{background-color:#A8A8A8;} .skillset .bg_dkgrey{background-color:#333333;} .skillset .bg_maroon{background-color:#800000;} .skillset .bg_orange{background-color:#FF9900;} .skillset .bg_purple{background-color:#9F81A9;} .skillset .bg_red{background-color:#D54346;} .skillset .bg_turquoise{background-color:#50C6C6;} .skillset .bg_yellow{background-color:#FFC600;} .skillset .bg_white{color:#666666; background-color:#FFFFFF;} /* Forms ---------------------------------------------------------------------------------------------------------------------------------------*/ form, fieldset, legend, label{margin:0; padding:0; border:none;} form{display:block; width:100%;} form div, form p{margin:0; padding:0;} legend{display:none;} label{display:block;} label input{margin-top:5px;} input[type="radio"] + label, input[type="checkbox"] + label{display:inline-block;}/* Label must be after the input element */ input, textarea, select{display:block; width:100%; padding:5px; background:inherit; border:1px solid; font-family:inherit; font-size:inherit; resize:none; outline:none;} input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"]{display:inline-block; width:auto; margin:0; padding:5px 15px; cursor:pointer;} input[type="radio"], input[type="checkbox"]{padding:0; border:none; border:0; /* Use both methods due to different browser rendering */} textarea{overflow:auto;} select{padding:8px; cursor:pointer;} select option{display:block; margin:10px; padding:0; cursor:pointer; outline:none; border:none; text-transform:capitalize; font-size:1em;} input.button, button.button{width:auto; border:none; cursor:pointer;} button.button{display:inline-block; margin:0; padding:0; background-color:transparent;} button.button span{display:inline-block; padding:5px 10px;} form.rnd5 input, form.rnd5 textarea{border-radius:5px;} form.rnd8 input, form.rnd8 textarea{border-radius:8px;} form.rnd10 input, form.rnd10 textarea{border-radius:10px;} form.rnd12 input, form.rnd12 textarea{border-radius:12px;} .required{color:#F00000; background-color:inherit;} /* Tables ---------------------------------------------------------------------------------------------------------------------------------------*/ table, .table{table-layout:auto; width:100%;} table caption, .table .t-caption{text-align:left; font-weight:bold; text-transform:none; margin-bottom:15px;} table thead th, .table .t-header .t-cell{text-transform:uppercase; font-weight:normal; font-size:16px; vertical-align:middle;} table, table th, table td, .table, .table .t-cell{border:1px solid; border-collapse:collapse; border-spacing:0; vertical-align:top;} table th, table td, .table .t-cell{padding:12px 15px;} .table{display:table;} .table .t-row{display:table-row;} .table .t-header{display:table-header-group;} .table .t-body{display:table-row-group;} .table .t-foot{display:table-footer-group;} .table .t-col{display:table-column;} .table .t-colgroup{display:table-column-group;} .table .t-cell{display:table-cell;} .table .t-caption{display:table-caption;} .table.calendar{max-width:100%; text-align:center; line-height:1em;} .table.calendar a{display:block; background-color:transparent;} .table.calendar .t-caption{text-align:center; text-transform:uppercase;} .table.calendar .t-cell{padding:5px 0; max-height:12px;} .table.calendar .t-header .t-cell{} /* Font Awesome Additions ---------------------------------------------------------------------------------------------------------------------------------------*/ .fa-6x{font-size:6em;} .fa-8x{font-size:8em;} .fa-10x{font-size:10em;} .fa-ul{margin:0; padding:0 0 0 2.14285714em; list-style:none;} .fa-ul > li{position:relative;} .fa-li{position:absolute; top:0; left:-2.14285714em; width:2.14285714em; text-align:left;} /* Social Icons ---------------------------------------------------------------------------------------------------------------------------------------*/ .social{margin:0; padding:0; list-style:none;} .social li, .social div{display:inline-block; margin:0 2px 2px 0; line-height:normal;} .social li:last-child, .social div:last-child{margin-right:0;} [class^="socico-"] em, [class*=" socico-"] em, [class^="fab"] em, [class*=" fab"] em, [class^="far"] em, [class*=" far"] em, [class^="fas"] em, [class*=" fas"] em{display:none;} [class^="socico-"], [class*=" socico-"]{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px; text-align:center;} [class^="socico-"]:hover, [class*=" socico-"]:hover, .social.coloured a:hover{color:#EAEAEA; background-color:#949494;} .social .socico-adn:hover, .social.coloured .socico-adn{background-color:#4A484C;} .social .socico-android:hover, .social.coloured .socico-android{background-color:#A4C639;} .social .socico-apple:hover, .social.coloured .socico-apple{background-color:#000000;} .social .socico-bitbucket:hover, .social.coloured .socico-bitbucket{background-color:#205081;} .social .socico-bitcoin:hover, .social.coloured .socico-bitcoin{background-color:#F7931A;} .social .socico-css3:hover, .social.coloured .socico-css3{background-color:#0070BB;} .social .socico-dribble:hover, .social.coloured .socico-dribble{background-color:#EA4C89;} .social .socico-dropbox:hover, .social.coloured .socico-dropbox{background-color:#3D9AE8;} .social .socico-facebook:hover, .social.coloured .socico-facebook{background-color:#3B5998;} .social .socico-flickr:hover, .social.coloured .socico-flickr{background-color:#FF0084;} .social .socico-foursquare:hover, .social.coloured .socico-foursquare{background-color:#25A0CA;} .social .socico-github:hover, .social.coloured .socico-github{background-color:#171516;} .social .socico-gittip:hover, .social.coloured .socico-gittip{background-color:#614C3E;} .social .socico-google-plus:hover, .social.coloured .socico-google-plus{background-color:#DB4A39;} .social .socico-html5:hover, .social.coloured .socico-html5{background-color:#E34C26;} .social .socico-instagram:hover, .social.coloured .socico-instagram{background-color:#3F729B;} .social .socico-linkedin:hover, .social.coloured .socico-linkedin{background-color:#0E76A8;} .social .socico-linux:hover, .social.coloured .socico-linux{background-color:#000000;} .social .socico-maxcdn:hover, .social.coloured .socico-maxcdn{background-color:#F5AE34;} .social .socico-pinterest:hover, .social.coloured .socico-pinterest{background-color:#C8232C;} .social .socico-renren:hover, .social.coloured .socico-renren{background-color:#005EA8;} .social .socico-rss:hover, .social.coloured .socico-rss{background-color:#EE802F;} .social .socico-skype:hover, .social.coloured .socico-skype{background-color:#00AFF0;} .social .socico-stack-exchange:hover, .social.coloured .socico-stack-exchange{background-color:#000000;} .social .socico-trello:hover, .social.coloured .socico-trello{background-color:#2174A6;} .social .socico-tumblr:hover, .social.coloured .socico-tumblr{background-color:#34526F;} .social .socico-twitter:hover, .social.coloured .socico-twitter{background-color:#00ACEE;} .social .socico-vk:hover, .social.coloured .socico-vk{background-color:#4E658E;} .social .socico-weibo:hover, .social.coloured .socico-weibo{background-color:#E32529;} .social .socico-windows:hover, .social.coloured .socico-windows{background-color:#94BF65;} .social .socico-xing:hover, .social.coloured .socico-xing{background-color:#126567;} .social .socico-youtube:hover, .social.coloured .socico-youtube{background-color:#C4302B;} .social.rnd5 li a{border-radius:5px;} .social.rnd8 li a{border-radius:8px;} .social.rnd10 li a{border-radius:10px;} .social.rnd12 li a{border-radius:12px;} .social.rnd50 li a{border-radius:50%;} /* Media Container ---------------------------------------------------------------------------------------------------------------------------------------*/ .mediabox{display:block; width:100%; position:relative; margin:0; padding:0;} .mediabox iframe{display:block; margin:0; padding:0;} /* Circles ---------------------------------------------------------------------------------------------------------------------------------------*/ .circle{display:inline-block; position:relative; text-align:center; border-radius:50%;} .circle.xsmall{width:40px; height:40px; line-height:40px; font-size:2em;} .circle.small{width:80px; height:80px; line-height:80px; font-size:3em;} .circle.medium{width:120px; height:120px; line-height:120px; font-size:5em;} .circle.large{width:200px; height:200px; line-height:200px; font-size:8em;} /* Opacity ---------------------------------------------------------------------------------------------------------------------------------------*/ .opacity-0{opacity:0; filter:alpha(opacity=0);} .opacity-10{opacity:0.1; filter:alpha(opacity=10);} .opacity-20{opacity:0.2; filter:alpha(opacity=20);} .opacity-30{opacity:0.3; filter:alpha(opacity=30);} .opacity-40{opacity:0.4; filter:alpha(opacity=40);} .opacity-50{opacity:0.5; filter:alpha(opacity=50);} .opacity-60{opacity:0.6; filter:alpha(opacity=60);} .opacity-70{opacity:0.7; filter:alpha(opacity=70);} .opacity-80{opacity:0.8; filter:alpha(opacity=80);} .opacity-90{opacity:0.9; filter:alpha(opacity=90);} .opacity-100, [class^="opacity-"]:hover, [class*=" opacity-"]:hover{opacity:1; filter:alpha(opacity=100);} /* Transparent ---------------------------------------------------------------------------------------------------------------------------------------*/ .transparent-0{color:inherit; background-color:rgba(0,0,0,0);} .transparent-10{color:inherit; background-color:rgba(0,0,0,.1);} .transparent-20{color:inherit; background-color:rgba(0,0,0,.2);} .transparent-30{color:inherit; background-color:rgba(0,0,0,.3);} .transparent-40{color:inherit; background-color:rgba(0,0,0,.4);} .transparent-50{color:inherit; background-color:rgba(0,0,0,.5);} .transparent-60{color:inherit; background-color:rgba(0,0,0,.6);} .transparent-70{color:inherit; background-color:rgba(0,0,0,.7);} .transparent-80{color:inherit; background-color:rgba(0,0,0,.8);} .transparent-90{color:inherit; background-color:rgba(0,0,0,.9);} [class^="transparent-"] a, [class*=" transparent-"] a{background-color:transparent;} /* Rounded Corners ---------------------------------------------------------------------------------------------------------------------------------------*/ .rnd5{border-radius:5px;} .rnd8{border-radius:8px;} .rnd10{border-radius:10px;} .rnd12{border-radius:12px;} .rnd14{border-radius:14px;} .rnd16{border-radius:16px;} .rnd18{border-radius:18px;} .rnd20{border-radius:20px;} .rnd50{border-radius:50%;} /* Code Blocks ---------------------------------------------------------------------------------------------------------------------------------------*/ code{word-wrap:break-word; white-space:normal;} code.code{display:block; width:100%;} pre, pre code{word-wrap:break-word; white-space:pre-wrap;} /* Testimonials ---------------------------------------------------------------------------------------------------------------------------------------*/ .testimonial{margin-top:30px;} .testimonial:first-child{margin-top:0;} .testimonial div blockquote{position:relative; width:auto; margin:0; padding:0 0 0 60px; border:none;} .testimonial div blockquote:before{position:absolute; top:0; left:0; max-height:35px; overflow:hidden; content:"\201C"; font:bold 110px/80px arial; border:none;} .testimonial blockquote *{margin:15px 0 0 0; padding:0;} .testimonial blockquote *:first-child{margin-top:0;} .testimonial .testimonial-author{display:block; margin:inherit 0 0 0; padding:0; line-height:normal;} .testimonial .testimonial-author .testimonial-caption{display:block;} .testimonial .testimonial-author strong, .testimonial .testimonial-author span{display:block; margin:0; padding:0;} .testimonial .testimonial-author span{font-size:.8em;} .testimonial.opt2 blockquote{position:relative; width:100%; margin:0 0 20px 0; padding:20px; border-width:1px;} .testimonial.opt2 blockquote:after{position:absolute; bottom:-20px; left:20px; width:0; height:0; content:""; border-color:transparent; border-width:20px 15px 0 15px; border-top-color:inherit;} .testimonial.opt2 .testimonial-author{margin:0 0 0 20px;} .testimonial.opt3 blockquote{position:relative; width:100%; margin:0 0 20px 0; padding:20px; border-radius:8px 0 8px 8px;} .testimonial.opt3 blockquote, .testimonial.opt3 blockquote:before, .testimonial.opt3 blockquote:after{border-width:1px;} .testimonial.opt3 blockquote:before{position:absolute; bottom:-20px; left:20px; width:0; height:0; content:""; border-color:transparent; border-width:20px 0 0 40px; border-top-color:inherit;} .testimonial.opt3 blockquote:after{position:absolute; top:-1px; right:-1px; width:25px; height:25px; padding:2px 0 0 0; overflow:hidden; content:"\201D"; font:bold 30px/35px arial; text-align:center; border-color:inherit; border-radius:0 0 0 8px;} .testimonial.opt3 .testimonial-author{width:100%; margin:15px 0 0 0; font-size:12px;} .testimonial.opt3 .testimonial-author img{display:inline-block; float:left; margin:0 10px 0 0; max-width:50px; height:auto;} .testimonial.opt3 .testimonial-author .testimonial-caption{display:inline-block; float:left; margin-top:10px;} .testimonial.opt3 .testimonial-author span{display:inline;} /* Widgets ---------------------------------------------------------------------------------------------------------------------------------------*/ .widget-wrapper{display:block; margin:0 0 50px 0; padding:0;} .widget-wrapper:last-child{margin:0;} .widget-wrapper .sbtitle{margin:0 0 30px 0; padding:0;} .widget-wrapper .sbtitle span{margin:0 10px 0 0; padding:0;} .widget-wrapper .sdb-form{display:block;} .widget-wrapper .sdb-form div{display:block; position:relative;} .widget-wrapper .sdb-form div span{display:block; position:absolute; top:0; left:0; width:35px; height:40px; line-height:40px; font-size:14px; text-align:center;} .widget-wrapper .sdb-form input[type="text"], .widget-wrapper .sdb-form input[type="password"]{display:block; height:40px; padding-left:35px;} .widget-wrapper .sdb-form#login input[type="checkbox"]{display:block; margin:0;} .widget-wrapper .sdb-form#login label{display:block; margin:-16px 0 0 20px;} .widget-wrapper .recent li{margin:20px 0 0 0; padding:0 0 20px 0; line-height:normal; border-bottom:1px solid;} .widget-wrapper .recent li:first-child{margin-top:0;} .widget-wrapper .tab-wrapper .tab-container .recent li:last-child{border:none;} .widget-wrapper .recent li img{float:left; margin-right:10px;} .widget-wrapper .recent li p{margin:0; padding:0;} .widget-wrapper .recent li ul{} .widget-wrapper .recent li li{display:block; margin:0; padding:0; border:none;} .widget-wrapper .recent .blog-post-meta ul{padding:5px 0 0 0;} .widget-wrapper .recent .blog-post-meta ul li{margin:0 0 5px 0;} .widget-wrapper .sdb-gallery.spacing li{margin-bottom:15px;} /* Timeline ---------------------------------------------------------------------------------------------------------------------------------------*/ .timeline, .timeline:after{display:block; position:relative; margin:0; padding:0; list-style:none;} .timeline{width:100%; padding:30px 0;} .timeline:after{top:0; left:50%; width:4px; height:100%; margin-left:-2px;} .timeline *{word-wrap:break-word;} .timeline li{display:block; position:relative; margin-bottom:50px; padding:0 50% 0 0; overflow:hidden;} .timeline li:nth-child(even){padding:0 0 0 50%;} .timeline li:last-child{margin:0;} .timeline li time{display:inline-block; position:absolute; top:36px; left:50%; font-style:normal; font-weight:700; line-height:.8em;} .timeline li:nth-child(even) time{right:50%; left:auto;} .timeline li .tli{position:absolute; top:10px; left:50%; width:66px; height:66px; margin:0 0 0 -33px; border:3px solid; border-radius:50%; text-align:center; font-size:26px; line-height:60px;} .timeline li article{position:relative; padding:20px; border:1px solid; border-radius:15px;} .timeline li article *{margin:0 0 15px 0; padding:0;} .timeline li article :last-child{margin:0;} .timeline li article p:last-child{} .timeline li:nth-child(even) article p:last-child{text-align:right;} .timeline li article:after{top:30px; right:-10px; width:0; height:0; border:solid transparent; border-width:10px 0 10px 10px;} .timeline li:nth-child(even) article:after{right:auto; left:-10px; border-width:10px 10px 10px 0;} /* Generalise */ .timeline li:nth-child(even) time, .timeline li article{margin:0 53px 0 0;} .timeline li time, .timeline li:nth-child(even) article{margin:0 0 0 53px;} .timeline:after, .timeline li article:after{position:absolute; content:""; z-index:-1;} .timeline li .tli, .timeline li article{} /* Services ---------------------------------------------------------------------------------------------------------------------------------------*/ .service{display:block; position:relative; margin:0 0 50px 0; padding:0 0 0 75px;} .service .srvico{display:inline-block; position:absolute; top:0; left:0; width:60px; height:60px; border:1px solid; font-size:26px; line-height:60px; text-align:center;} .service .srvcontent{} .service .srvcontent *{margin:15px 0 0 0;} .service .srvcontent :first-child{margin:0;} .service.srv-2{padding:30px 0 0 0; text-align:center;} .service.srv-2 .srvico{left:50%; margin-left:-30px;} .service.srv-2 .srvcontent{padding:50px 30px 30px 30px; border:1px solid;} .service.srv-3{padding:0 0 30px 0; text-align:center; border-bottom:1px solid;} .service.srv-3 .srvico{position:relative; top:auto; left:auto; margin:0 0 30px 0;} /* Google Maps ---------------------------------------------------------------------------------------------------------------------------------------*/ .map{display:block; position:relative; width:100%; height:350px;}/* Height (min or max-height don't work) has to be defined, otherwise the map wont be shown */ .map [id^="map_canvas_"]{width:100%; height:100%;} .map [id^="map_canvas_"] img[src*="gstatic.com/"], [id^="map_canvas_"] img[src*="googleapis.com"]{width:auto; max-width:none; height:auto;}