tethys/public/css/style.css

/* 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: "Roboto", Helvetica, Arial, sans-serif;
}
h1, h3{
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h4 {
  font-size: 22px;
}
h3 {
  font-size: 26px;
}
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%;

  }
  /* 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: 80px 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.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-color: #fff;
  border-bottom: 1px solid #dcdcdc;
}

.navigation ul {
  list-style: none;
  /* position: absolute;
  top: 0;
  left: 0; 
  right: 0; */
  margin: 0;
  background-color: #fff;
}
.header ul li {
  display: block;
  float: left;
  text-align: center;
  margin: 0; 
}
.navigation ul li a {
  display: inline-block;
	padding: 14px 16px;
  height: 100%;  
  text-transform: uppercase;
  color: #757575;
	font-size: 1.7rem;
	text-decoration: none;	
	transition: 0.2s;
}

.navigation ul li a.current,
.navigation ul li a:hover {
  background-color: #eee; 
	color: #757575;
}

/* 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;
}

/* 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-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; 
}


/* 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;
}