872 lines
16 KiB
CSS
Vendored
872 lines
16 KiB
CSS
Vendored
/* Fonts */
|
||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
|
||
|
||
/* SlimJoe */
|
||
|
||
textarea {
|
||
min-height: 200px;
|
||
resize: none;
|
||
}
|
||
|
||
/* Personal Flavour */
|
||
* {
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
-ms-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
|
||
}
|
||
|
||
/* Typography */
|
||
body {
|
||
font-size: 16px;
|
||
letter-spacing: .05em;
|
||
color: #222222;
|
||
font-family: "Open Sans", Helvetica, Arial, sans-serif;
|
||
}
|
||
h1, h3{
|
||
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
}
|
||
h4 {
|
||
font-size: 22px;
|
||
}
|
||
h3 {
|
||
font-size: 26px;
|
||
}
|
||
.paragraph-justify {
|
||
text-align: justify;
|
||
}
|
||
a {
|
||
color: #3273dc;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Custom ultilities */
|
||
/* Centered */
|
||
.centered {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
-webkit-transform: translate(-50%,-50%);
|
||
-moz-transform: translate(-50%,-50%);
|
||
-ms-transform: translate(-50%,-50%);
|
||
-o-transform: translate(-50%,-50%);
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
.vertical-centered {
|
||
position: absolute;
|
||
top: 50%;
|
||
-webkit-transform: translateY(-50%);
|
||
-moz-transform: translateY(-50%);
|
||
-ms-transform: translateY(-50%);
|
||
-o-transform: translateY(-50%);
|
||
transform: translateY(-50%);
|
||
width: 100%;
|
||
|
||
}
|
||
|
||
.main-heading {
|
||
text-align: center;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
color: inherit;
|
||
}
|
||
/* Separator */
|
||
|
||
.separator {
|
||
position: relative;
|
||
/* margin-bottom: 1.7em; */
|
||
padding-bottom: 1.7em;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
color: inherit;
|
||
}
|
||
.separator:before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
width: 86px;
|
||
height: 2px;
|
||
background-color: #222;
|
||
|
||
-webkit-transform: translateX(-50%);
|
||
-ms-transform: translateX(-50%);
|
||
-o-transform: translateX(-50%);
|
||
transform: translateX(-50%);
|
||
}
|
||
.separator.orange:before {
|
||
background-color: #d87843;
|
||
}
|
||
|
||
|
||
/* Button inverted */
|
||
.button.inverted {
|
||
font-size: inherit;
|
||
padding: 25px 70px;
|
||
color: white;
|
||
height: auto;
|
||
border: 3px solid white;
|
||
text-transform: none;
|
||
font-size: 26px;
|
||
font-family: "ambleregular";
|
||
}
|
||
.button.inverted:hover {
|
||
background: white;
|
||
color: #222;
|
||
}
|
||
.button.circle {
|
||
padding: 0;
|
||
width: 2.5em;
|
||
height: 2.5em;
|
||
line-height: 2.5em;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
-webkit-box-sizing: content-box;
|
||
-moz-box-sizing: content-box;
|
||
-ms-box-sizing: content-box;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
/* =Section general styling
|
||
-------- */
|
||
section {
|
||
text-align: center;
|
||
padding: 60px 0 0 0;
|
||
}
|
||
section.normal {
|
||
text-align: left;
|
||
}
|
||
|
||
.content-container {
|
||
margin-top: 25px;
|
||
}
|
||
/*
|
||
|
||
Section with featured background image. Every section which will have this
|
||
class will get the effect with a background cover.
|
||
|
||
*/
|
||
.help:before {
|
||
background: url("../images/help_bg_image.jpg");
|
||
}
|
||
.creativity:before {
|
||
background: url("../images/creativity_bg_image.jpg");
|
||
background-position: 50% 0;
|
||
}
|
||
.quote:before {
|
||
background: url("../images/quote_bg_image.jpg");
|
||
}
|
||
.video-iframe{
|
||
position: absolute;
|
||
left: 0; top: 0; bottom: 0; right: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
display: none;
|
||
}
|
||
.video:before {
|
||
background: url("../images/video_bg_image.jpg");
|
||
}
|
||
|
||
.featured-bg-image {
|
||
position: relative;
|
||
/* background-color: #222222; */
|
||
background-color: gray;
|
||
color: white;
|
||
min-height: 500px;
|
||
}
|
||
.featured-bg-image:before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; right: 0; left: 0; bottom: 0;
|
||
background-size: cover;
|
||
background-position: 50% 50%;
|
||
background-repeat: no-repeat;
|
||
opacity: .35;
|
||
}
|
||
|
||
.footer {
|
||
/* background-color: #222222; */
|
||
background-color: #2D3138;
|
||
font-size: 0.8em;
|
||
color: rgb(255, 255, 255);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
padding-top: 5em;
|
||
padding-bottom: 3em;
|
||
text-align:left;
|
||
}
|
||
.footer a {
|
||
color: #ffffff;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.footer a:hover {
|
||
/*color: #cccccc;*/
|
||
color: #4698D5;
|
||
}
|
||
|
||
.footer ul {
|
||
list-style-type: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.footer li {
|
||
line-height: 1.6em;
|
||
}
|
||
|
||
.footer h3 {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.footer p {
|
||
padding-right: 1em;
|
||
}
|
||
|
||
.footer hr {
|
||
margin-top: 5em;
|
||
margin-bottom: 3em;
|
||
background-color: #ccc;
|
||
border: none;
|
||
height: 1px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =Navigation
|
||
-------- */
|
||
.header {
|
||
background-color: #fff;
|
||
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
|
||
position: fixed;
|
||
width: 100%;
|
||
z-index: 3;
|
||
}
|
||
.header .menu {
|
||
clear: both;
|
||
max-height: 0;
|
||
transition: max-height .2s ease-out;
|
||
}
|
||
.header .menu-icon {
|
||
color: white;
|
||
font-size: 30px;
|
||
line-height: 1em;
|
||
|
||
position: absolute;
|
||
left: 100%;
|
||
padding: 20px;
|
||
|
||
-webkit-transition: all .15s ease-in-out;
|
||
-moz-transition: all .15s ease-in-out;
|
||
-ms-transition: all .15s ease-in-out;
|
||
-o-transition: all .15s ease-in-out;
|
||
transition: all .15s ease-in-out;
|
||
user-select: none;
|
||
}
|
||
|
||
.header .menu-icon.active {
|
||
background-color: rgba(0,0,0, .3);
|
||
}
|
||
.header .menu-icon:hover {
|
||
color: #222;
|
||
background-color: transparent;
|
||
}
|
||
.navigation.transparent {
|
||
background-color: #fff;
|
||
border-bottom: 1px solid #dcdcdc;
|
||
}
|
||
|
||
|
||
.navigation.active {
|
||
/* make visible visible */
|
||
-webkit-transform: translateX(0);
|
||
-moz-transform: translateX(0);
|
||
-ms-transform: translateX(0);
|
||
-o-transform: translateX(0);
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.navigation {
|
||
position: fixed;
|
||
|
||
top: 0; left: 0; bottom: none;
|
||
|
||
z-index: 3;
|
||
width: 100%;
|
||
|
||
-webkit-transform: translateX(-100%);
|
||
-moz-transform: translateX(-100%);
|
||
-ms-transform: translateX(-100%);
|
||
-o-transform: translateX(-100%);
|
||
transform: translateX(-100%);
|
||
|
||
-webkit-transition: all .5s ease-in-out;
|
||
-moz-transition: all .5s ease-in-out;
|
||
-ms-transition: all .5s ease-in-out;
|
||
-o-transition: all .5s ease-in-out;
|
||
transition: all .5s ease-in-out;
|
||
background:#3ad29f;
|
||
/* border-bottom: 1px solid #dcdcdc; */
|
||
}
|
||
|
||
.navigation ul {
|
||
/* display:none; */
|
||
width:100%;
|
||
list-style:none;
|
||
margin: 0;
|
||
padding:0;
|
||
|
||
/* background-color: #fff; */
|
||
}
|
||
.header ul li {
|
||
display: block;
|
||
float: left;
|
||
text-align: center;
|
||
margin: 0;
|
||
}
|
||
|
||
.navigation.transparent ul li a {
|
||
color: #757575;
|
||
background-color: white;
|
||
}
|
||
|
||
.navigation ul li a {
|
||
display: block;
|
||
padding:1em;
|
||
background:#3ad29f; /* green */
|
||
color: white;
|
||
/* font-size: 1.7rem; */
|
||
text-decoration: none;
|
||
/* border-right: 1px solid #28b183; */
|
||
}
|
||
|
||
#nav.transparent ul li a.current,
|
||
#nav.transparent ul li a:hover {
|
||
background-color: #eee;
|
||
color: #757575;
|
||
}
|
||
|
||
#nav ul li a.current,
|
||
#nav ul li a:hover {
|
||
background: #2dc592;
|
||
}
|
||
|
||
/* Float right the list item that should be right aligned */
|
||
.navigation ul li.right { float: right; }
|
||
|
||
/* =Hero
|
||
-------- */
|
||
.hero {
|
||
padding: 0;
|
||
min-height: 500px;
|
||
text-align: center;
|
||
position: relative;
|
||
/* background-color: #d56d4d; */
|
||
background-color: #3abac4; /* layer fill content */
|
||
color: white;
|
||
}
|
||
.hero-image {
|
||
background: url("../images/csm_kabel.png") no-repeat;
|
||
background-size: cover;
|
||
background-position: 50% 50%;
|
||
position: absolute;
|
||
top: 0; right: 0; bottom: 0; left: 0;
|
||
opacity: .9;
|
||
}
|
||
.hero-image:after {
|
||
content: '';
|
||
opacity: .77;
|
||
/* background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); */
|
||
background-image: -moz-linear-gradient(right, #A8EB12 0%, #3abac4 100%);
|
||
background-image: -o-linear-gradient(right, #bb4242 0%, #efab4a 100%);
|
||
background-image: -webkit-linear-gradient(right, #A8EB12 0%, #3abac4 100%);
|
||
background-image: linear-gradient(right, #bb4242 0%, #efab4a 100%);
|
||
position: absolute;
|
||
top: 0; right: 0; bottom: 0; left: 0;
|
||
}
|
||
.hero h2 {
|
||
/* font-size: 24px; original */
|
||
font-size: 26px;
|
||
}
|
||
|
||
.hero p {
|
||
padding: 0 15%;
|
||
}
|
||
.hero .separator:before {
|
||
background-color: white;
|
||
}
|
||
|
||
/*Contact*/
|
||
.contact-us {
|
||
background-color: #f2f2f2;
|
||
text-align: left;
|
||
}
|
||
.contact-us-details {
|
||
padding: 70px;
|
||
}
|
||
.contact-us-details h5 {
|
||
font-size: 2rem;
|
||
}
|
||
.contact-us-details .social-links a {
|
||
color: #222;
|
||
display: block;
|
||
}
|
||
|
||
.contact-us-details .social-links li {
|
||
list-style: none;
|
||
float: left;
|
||
font-size: 24px;
|
||
margin-right: 10px;
|
||
}
|
||
.contact-us-details .social-links li:last-child {
|
||
margin-right: 0;
|
||
}
|
||
.contact-us-form {
|
||
padding: 70px;
|
||
background-color: #e4e4e4;
|
||
}
|
||
.contact-us .row {
|
||
margin: 0;
|
||
}
|
||
|
||
|
||
|
||
.search-items {
|
||
list-style: none;
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
.search-items li {
|
||
position: relative;
|
||
overflow: hidden;
|
||
/* important because we need to overwrite the default skeleton */
|
||
margin: 0!important;
|
||
/* width: 33%; */
|
||
/* border: 10px solid white; */
|
||
|
||
position: relative;
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
}
|
||
.search-items li:nth-child(4n) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* Work */
|
||
/* .work {
|
||
background-color: #F5F5F5;
|
||
} */
|
||
|
||
/* Work Filters */
|
||
|
||
.work-filters {
|
||
list-style: none;
|
||
}
|
||
.work-filters li {
|
||
display: inline-block;
|
||
margin: 0 .5em;
|
||
font-size: 18px;
|
||
text-transform: uppercase;
|
||
font-family: "slim_joeregular";
|
||
}
|
||
.work-filters li a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
.work-filters li.active {
|
||
font-family: "big_johnregular"
|
||
}
|
||
|
||
/* Work items */
|
||
|
||
.work-items {
|
||
list-style: none;
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
.work-items li {
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 360px;
|
||
|
||
/* important because we need to overwrite the default skeleton */
|
||
margin: 0!important;
|
||
width: 33%;
|
||
border: 10px solid white;
|
||
|
||
position: relative;
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
}
|
||
.work-items li:nth-child(4n) {
|
||
margin-left: 0;
|
||
}
|
||
.work-items li img{
|
||
width: auto;
|
||
height: 100%;
|
||
display: block;
|
||
|
||
}
|
||
|
||
/* Work detail */
|
||
.work-detail {
|
||
position: absolute;
|
||
top: 0; bottom: 0; left: 0; right: 0;
|
||
|
||
opacity: 0;
|
||
background: rgba(0,0,0,.75);
|
||
color: white;
|
||
|
||
-webkit-transition: all .3s ease-in-out;
|
||
-moz-transition: all .3s ease-in-out;
|
||
-ms-transition: all .3s ease-in-out;
|
||
-o-transition: all .3s ease-in-out;
|
||
transition: all .3s ease-in-out;
|
||
}
|
||
.work-detail h3 {
|
||
font-size: 16px;
|
||
letter-spacing: .05em;
|
||
}
|
||
.work-detail p {
|
||
font-size: 15px;
|
||
/* text-transform: capitalize; */
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.work-front {
|
||
position: absolute;
|
||
top: 0; bottom: 0; left: 0; right: 0;
|
||
|
||
/* opacity: 0; */
|
||
background: #F5F5F5;
|
||
color: black;
|
||
box-shadow: inset 0 0 0 10px grey;
|
||
}
|
||
.work-front p { font-size: 15px;
|
||
color: black;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
}
|
||
.work-front .icon {
|
||
line-height: 1;
|
||
font-size: 40px;
|
||
color: #00bfffcc;
|
||
}
|
||
|
||
.work-items li:hover .work-detail{
|
||
opacity: 1;
|
||
box-shadow: inset 0 0 0 10px #222;
|
||
}
|
||
.work-items li:hover .work-front{
|
||
opacity: 0;
|
||
|
||
}
|
||
|
||
/* Clients */
|
||
.clients {
|
||
background-color: #F5F5F5;
|
||
list-style: none;
|
||
}
|
||
.clients li {
|
||
display: inline-block;
|
||
width: 18%;
|
||
margin-right: 2%;
|
||
}
|
||
.clients li:last-child {
|
||
margin-right: 0;
|
||
}
|
||
.clients li img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
-webkit-filter: greyscale(100%);
|
||
-moz-filter: greyscale(100%);
|
||
filter: greyscale(100%);
|
||
}
|
||
|
||
/* About */
|
||
.people-list {
|
||
list-style: none;
|
||
margin: 70px 0;
|
||
width: 100%;
|
||
}
|
||
.people-list li {
|
||
position: relative;
|
||
height: 300px;
|
||
overflow: hidden;
|
||
}
|
||
.people-list li img {
|
||
width: auto;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
.people-list .people-hover {
|
||
position: absolute;
|
||
top: 0; bottom: 0; left: 0; right: 0;
|
||
background: rgba(0,0,0,.45);
|
||
|
||
opacity: 0;
|
||
|
||
-webkit-transition: all .3s ease-in-out;
|
||
-moz-transition: all .3s ease-in-out;
|
||
-ms-transition: all .3s ease-in-out;
|
||
-o-transition: all .3s ease-in-out;
|
||
transition: all .3s ease-in-out;
|
||
}
|
||
.people-list .people-hover a {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
color: white;
|
||
}
|
||
|
||
/* About people details */
|
||
|
||
.people-list .people-detail {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 0 20px;
|
||
z-index: 1;
|
||
color: white;
|
||
}
|
||
.people-list .people-detail h3 {
|
||
font-size: 22px;
|
||
margin-bottom: 0;
|
||
}
|
||
.people-list .people-detail p {
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* Feature people hiring */
|
||
|
||
.people-list li.blank-feature{
|
||
box-shadow: inset 0 0 0 3px #222;
|
||
}
|
||
.people-list li.blank-feature img {
|
||
visibility: hidden;
|
||
}
|
||
.people-list li.blank-feature h3 {
|
||
font-size: 26px;
|
||
}
|
||
.people-list li:hover .people-hover{
|
||
opacity: 1;
|
||
box-shadow: inset 0 0 0 5px #222;
|
||
}
|
||
.why {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
/* Help */
|
||
.help {
|
||
list-style: none;
|
||
margin: 5px 0;
|
||
}
|
||
.help .help-image {
|
||
height: 80px;
|
||
margin-bottom: 5px;
|
||
}
|
||
.help h5 {
|
||
margin-bottom: 10px;
|
||
}
|
||
/* OAI */
|
||
ul.quicklinks {
|
||
margin-top: 2px;
|
||
padding: 4px;
|
||
text-align: left;
|
||
/* border-bottom: 2px solid #ccc; */
|
||
/* border-top: 2px solid #ccc; */
|
||
clear: left;
|
||
}
|
||
ul.quicklinks li {
|
||
font-size: 90%;
|
||
display: inline;
|
||
list-style: none;
|
||
/* font-family: sans-serif; */
|
||
}
|
||
|
||
|
||
/* Services */
|
||
.services {
|
||
list-style: none;
|
||
margin: 70px 0;
|
||
}
|
||
.services .service-image {
|
||
height: 150px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.services .service-image img{
|
||
display: table-cell;
|
||
display: block;
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
|
||
}
|
||
/* .services h5 {
|
||
|
||
} */
|
||
.services p {
|
||
font-size: 16px;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
/* Media Queries
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
/*
|
||
Note: The best way to structure the use of media queries is to create the queries
|
||
near the relevant code. For example, if you wanted to change the styles for buttons
|
||
on small devices, paste the mobile query code up in the buttons secion and style it
|
||
there.
|
||
*/
|
||
|
||
|
||
/* Larger than mobile */
|
||
@media (max-width: 400px) {
|
||
.button.inverted {
|
||
padding: 15px;
|
||
}
|
||
.work-items li.isotope-item.columns {
|
||
width: 100%;
|
||
}
|
||
.contact-us-form {
|
||
padding: 5px;
|
||
background-color: #e4e4e4;
|
||
}
|
||
}
|
||
@media (min-width: 400px) and (max-width: 750px) {
|
||
.work-items li.isotope-item.columns {
|
||
width: 100%;
|
||
}
|
||
.people-list li.people-list-item.columns {
|
||
width: 46%;
|
||
margin: 2%;
|
||
box-sizing: content-box;
|
||
}
|
||
.contact-us-details {
|
||
padding: 70px 25px;
|
||
text-align: center;
|
||
}
|
||
.contact-us-details .social-links li {
|
||
text-align: center;
|
||
width: 33%;
|
||
margin: 0;
|
||
}
|
||
.contact-us-details h5 {
|
||
font-size: 1.7rem;
|
||
}
|
||
|
||
}
|
||
|
||
/* Larger than phablet (also point when grid becomes active) */
|
||
@media (min-width: 550px) and (max-width: 750px) {
|
||
|
||
.work-items li.isotope-item.columns {
|
||
width: 50%;
|
||
}
|
||
}
|
||
|
||
/* larger than tablet */
|
||
@media (min-width: 750px) {
|
||
.header .navigation {
|
||
/* clear: none;
|
||
float: right;
|
||
max-height: none; */
|
||
/* always visible */
|
||
-webkit-transform: translateX(0);
|
||
-moz-transform: translateX(0);
|
||
-ms-transform: translateX(0);
|
||
-o-transform: translateX(0);
|
||
transform: translateX(0);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
/* smaller than tablet */
|
||
@media (max-width: 750px) {
|
||
.header ul li {
|
||
display: list-item;
|
||
float: none;
|
||
text-align: left;
|
||
|
||
}
|
||
.header li a {
|
||
/* padding: 20px 30px; */
|
||
display: block;
|
||
text-align: left;
|
||
}
|
||
|
||
.navigation a.menu-icon {
|
||
display: inline;
|
||
}
|
||
.header .navigation {
|
||
width: 320px;
|
||
height: 100%;
|
||
|
||
|
||
}
|
||
.navigation ul li:hover ul {
|
||
border: none;
|
||
}
|
||
.navigation ul li.right {
|
||
float: none;
|
||
}
|
||
}
|
||
|
||
/* Larger than desktop */
|
||
@media (min-width: 1000px) {
|
||
}
|
||
|
||
/* Larger than Desktop HD */
|
||
@media (min-width: 1200px) {}
|
||
|
||
#trynewsite {
|
||
/* background-color: rgb(178,34,34);
|
||
background-color: rgba(178,34,34,0.7); */
|
||
background-color: #00bfffcc;
|
||
width: 280px;
|
||
position: fixed;
|
||
top: 60px;
|
||
right: -64px;
|
||
padding: 10px;
|
||
text-align: center;
|
||
box-shadow: 1px 1px 5px grey;
|
||
-moz-transform: rotate(45deg);
|
||
-webkit-transform: rotate(45deg);
|
||
-o-transform: rotate(45deg);
|
||
-ms-transform: rotate(45deg);
|
||
transform: rotate(45deg);
|
||
z-index:999;
|
||
}
|
||
|
||
#trynewsite span {
|
||
font-weight: bold;
|
||
/* font-size: 1.25em; */
|
||
text-decoration: none;
|
||
color:black;
|
||
} |