/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/



/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
    font-family: 'gothic';
    src: url('../font/gothic-webfont.eot');
    src: url('../font/gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/gothic-webfont.woff2') format('woff2'),
         url('../font/gothic-webfont.woff') format('woff'),
         url('../font/gothic-webfont.ttf') format('truetype'),
         url('../font/gothic-webfont.svg#gt_walsheimbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{
  position: fixed;
  width: 15%;
  margin: 0 0 0 5%;
  padding: 0 0;
  float: left;
}

header .logo{
  margin: 0 0 40px 0;
  display: inline-block;
}

.logo a img{
  max-width: 95%;
}

header ul{
  list-style: none;
  font-family: "gothic", "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.8rem;
}

.container {
  position: absolute;
  width: 70%;
  margin: 0 5% 2% 24%;
  padding: 0 0;
  box-sizing: border-box; 
  float: left;
}

.project{
  width: 100%;
  display: block;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  margin: 0 0 30px 0;
}

.snapshot{
  display: inline-block;
  height: auto;
  width: 38%;
}

.project_brief{
  display: inline-block;
  padding: 0 7% 0 3%;
  vertical-align: middle;
  width: 51%;
}

.project_brief p{
  font-size: 1.7rem;
  line-height: 3.2rem;
}

.hero_image{  
  background-position: left center;
  width: 70%;
  height:auto;
  padding: 11% 15% 0 ;
  min-height: 400px;
  text-align: center;
}

.revenueplus_hero{
  background: url(../images/Revenueplus_bg.jpg) no-repeat;
}

.traeldesk_hero{
  background: url(../images/TravelDesk_bg.jpg) no-repeat;
}

.pretups_hero{
  background: url(../images/Pretup_bg.jpg) no-repeat;
}

.hero_image P{
  padding: 0 7%;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.9;
}

.hero_mockup{
  height: auto;
  margin: 10% auto 0;
  width: 80%;
}

.hero_mockup-1{
  height: auto;
  margin: 10% auto 0;
  width: 100%;
}

.case_study{
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.content_style_1{
  width: 100%;
  float: left;
  clear: both;
  padding: 10% 0;
}

.one_column{
  width: 65%;
  padding: 0 17.5%;
  display: block;
  float: left;
}

.one_column p{  
  margin: 0 10% 5% 0;
  font-size: 1.9rem;
  line-height: 3.5rem;
  font-weight: 400;
}

.one_column p:last-child{
  margin: 0 10% 0 0;
}

.one_column h6{
  margin: 0 0;
}

.one_half_column{
  width: 45%;
  padding: 0 5% 0 0;
  margin: 8% 0 0 0;
  float: left;
}

.one_half_column p{
  font-size: 1.6rem;
  color: #444444;
  line-height: 3.4rem;
  font-weight: 300;
}

.content_style_2{
  background: #1c1f28;
  width: 100%;
  float: left;
  clear: both;
  padding: 7% 0;
}

.content_style_2 .one_column{
  width: 75%;
  padding: 0 12.5%;
}


.content_style_3{
  background: #f8f8f8;
  width: 100%;
  float: left;
  clear: both;
  padding: 10% 0;
}

.image_Style-1{
  clear: both;
  margin: 7% 7.5% 0;
  width: 85%;
}

.profile_pic{
  position: absolute;
  left: 35%;
}

.content_style_4{
  background: #1c1f28;
  width: 100%;
  float: left;
  clear: both;
  padding: 6% 0 12% 0;
}

.content_style_5{
  width: 100%;
  float: left;
  clear: both;
  padding: 15% 0 7%;
}

.content_style_5 > .one_column  p{margin: 0;}

.content_style_5 ul{
  list-style: none;
  color: #1e2024;
  font-weight: 400;
}

.content_style_5 ul li {
    margin-bottom: 1.5rem;
}

.next{
  width: 70%;
  padding: 7% 15% 6%;
  text-align: left;
  float: left;
  background: #1A1A1A;
}

.next span{
  display: block;
  font-size: 1.4rem;
  color: #D0D0D0;
  line-height: 1;
  font-weight: 500;
}

.next a{
  display: block;
  font-size: 4.5rem;
  font-family: "gothic", helvetica, arial;
  line-height: 1.2;
  color: #fff
}

.next a:hover{
  color: #FEC7C7;
}

.next_roject_RP{
  background: url(../images/Revenueplus_bg.jpg) no-repeat;
}

.next_roject_TD{
  background: url(../images/TravelDesk_bg.jpg) left center no-repeat;
}

.next_roject_PT{
  background: url(../images/Pretup_bg.jpg) no-repeat;
}

.experience{

}

.experience > .one_column .one_half_column h5{
    margin-bottom: 3%;
}

.experience > .one_column .one_half_column p{
    margin-bottom: 1%;
}

.footer{
  position:fixed;
  width: 15%;
  margin: 0 0 0 5%;
  right:0;
  bottom:0;
  left:0;
  font-family: "Arial", "gothic", "Raleway", "HelveticaNeue", Helvetica, Arial, sans-serif;
  font-size: 1.1rem; 
}

.footer ul{
  list-style: none;
}

.footer ul li{
  display: inline-block;
  float: left;
  margin: 0 10px;  
}

.footer ul li:first-child{
  margin-left: 0;  
}

.pad_btm{
  padding-bottom: 0 !important;
}

.skills{
  margin-top: 0;
  font-size: 2rem;
}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  background-color: #EEEEEE;
  font-size: 1.7em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.7;
  font-weight: 300;
  font-family: "Merriweather","Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #555; 
  padding: 25px 0 0 0;
}

img{
  max-width: 100%;
  vertical-align: middle;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-family: "gothic", "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
  font-weight: normal;}
h1 { font-size: 5.0rem; line-height: 1.2;  letter-spacing: -.1rem; color: #fff; margin: 0 0 4% 0;}
h2 { font-size: 4.5rem; line-height: 1.25; letter-spacing: -.15rem; color: #1e2024; margin: 0 8% 5% 0;}
h3 { font-size: 2.8rem; line-height: 1.6;  color: #fff;  margin: 5% 0 12% 0;}
h4 { font-size: 4.0rem; line-height: 1.35; letter-spacing: -.08rem; color: #1e2024; margin: 0 0 4% 0;}
h5 { font-size: 2.8rem; line-height: 1.5;  letter-spacing: -.05rem; color: #1e2024;}
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; color: #ea0200; }

/* Larger than phablet 
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}*/

p {
  font-family: "Merriweather", serif;
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #080808; 
  text-decoration: none;
}

a:hover {
  color: #ea2127; 
  transition: all .3s ease;
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #FFF;
  font-family: "gothic", "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial;
  text-align: center;
  font-size: 1.5rem;
  line-height: 38px;
  letter-spacing: 0.05rem;
  text-decoration: none;
  white-space: nowrap;
  background-color: #ea2127;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #FFF;
  background-color: #b7181c;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }




/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: none; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }



/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 0; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


.pad_bottom{
  padding-bottom: 0 !important;
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.header:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* 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 section and style it
there.
*/

@media only screen and (min-width: 1201px) and (max-width: 1440px) {

  h2{
    font-size: 3.7rem;
    margin: 0 0 4% 0;
  }

  h4{
    margin: 0 0 2% 0;
  }

  .project_brief p {
    font-size: 1.6rem;
    line-height: 3rem;
  }

  .one_half_column {
    margin: 8% 0 0;
  }

  .one_half_column p {
    line-height: 2.8rem;
  }

  .content_style_4{
    padding: 8% 0 16%;
  }

  .content_style_5{
    padding: 22% 0 7%;
  }

  .content_style_5 ul{
    color: #1e2024;
    font-size: 1.6rem;
    font-weight: 400;
  }

}



@media only screen and (min-width: 960px) and (max-width: 1200px) {

  
  header{
    display: block;
    clear: both;
    position: relative;
    width: 90%;
    margin: 0 5% 3%;
  }

  header .logo{
    display: inline-block;
    float: left;
    margin: 0;
  }

  header .logo a img{
    max-width: 85%;
  }

  header ul{
    font-size: 1.8rem;
    margin: 4% 0 0 0;
    float: right;
  }

  header ul li{
    display: inline-block;
    text-align: center;
    padding: 0 2rem;
    margin: 0;
  }

  .footer{
    float: left;
    margin: 5% 5% 4%;
    position: relative;
    width: 90%;
    font-size: 1.3rem;
  }

  .footer ul{
    margin: 0;
    float: left;
  }

  .footer ul li{
    display: inline-block;
    text-align: center;
    padding: 0 2rem;
    margin: 0;
  }
  
  .footer p{
    display: inline-block;
    float: right;
    margin: 0;
    padding: 0 2rem;  
  }

  .container{
    position: relative;
    width: 95%;
    margin: 0 2.5%;
  }

  .hero_image{
    width: 85%;
    padding: 11% 7.5% 0;
  }

  .project_brief p {
    font-size: 1.6rem;
    line-height: 3rem;
  }

  h4{
    margin: 0 0 2% 0;
  }

  .button, button, input[type="submit"], input[type="reset"], input[type="button"]{
    height: 35px;
    line-height: 35px;
  }

  .content_style_4{
     padding: 6% 0 16%;
  }

  .content_style_5{
    padding: 17% 0 7%;
  }

  .content_style_5 ul{
    color: #1e2024;
    font-size: 1.6rem;
    font-weight: 400;
  }

}


@media only screen and (min-width: 640px) and (max-width: 959px) {

  
  header{
    display: block;
    clear: both;
    position: relative;
    width: 90%;
    margin: 0 5% 3%;
  }

  header .logo{
    display: inline-block;
    float: left;
    margin: 0;
  }

  header .logo a img{
    max-width: 75%;
  }

  header ul{
    font-size: 1.8rem;
    margin: 4% 0 0 0;
    float: right;
  }

  header ul li{
    display: inline-block;
    text-align: center;
    padding: 0 2rem;
    margin: 0;
  }

  .next a{
    font-size: 3.3rem;
  }

  .footer{
    float: left;
    margin: 5% 5% 4%;
    position: relative;
    width: 90%;
    font-size: 1.2rem;
  }

  .footer ul{
    margin: 0;
    float: left;
  }

  .footer ul li{
    display: inline-block;
    text-align: center;
    padding: 0 2rem;
    margin: 0;
  }
  
  .footer p{
    display: inline-block;
    float: right;
    margin: 0;
    padding: 0 2rem;  
  }

  .container{
    position: relative;
    width: 95%;
    margin: 0 2.5%;
  }

  .hero_image {
    width: 85%;
    padding: 11% 7.25% 0;
  }

  .one_column {
    width: 80%;
    padding: 0 10%;
  }

  .project_brief p {
    font-size: 1.6rem;
    line-height: 3rem;
  }

  h4{
    margin: 0 0 2% 0;
  }

  .button, button, input[type="submit"], input[type="reset"], input[type="button"]{
    height: 35px;
    line-height: 35px;
  }

  .content_style_4{
     padding: 6% 0 26%;
  }

  .content_style_5{
    padding: 25% 0 7%;
  }


  .profile_pic {
    left: 28%;
  }

  .content_style_5 .one_column p{
    margin-bottom: 5%;
  }

  .content_style_5 .one_column .one_half_column{
    margin: 0;
  }

  .content_style_5 ul{
    color: #1e2024;
    font-size: 1.6rem;
    font-weight: 400;
  }

  .snapshot {
    height: auto;
    margin: 5% 20%;
    width: 60%;
  }

  .project_brief {
    padding: 0 15% 4%;
    text-align: center;
    width: 70%;
  }

  .one_half_column{
    padding: 0 5% 0 0;
    width: 95%;
  }

  .one_half_column h5{
    margin-bottom: 2%;
  }

}


@media only screen and (min-width: 0) and (max-width: 659px) {

  
  header{
    display: block;
    clear: both;
    position: relative;
    width: 90%;
    margin: 0 5% 3%;
  }

  header .logo{
    display: block;
    margin: 0 0 7%;
    text-align: center;
    width: 100%;
  }

  header .logo a img{
    max-width: 100%;
  }

  header ul{
    display: block;
    float: none;
    font-size: 1.8rem;
    margin: 0 0 2%;
    text-align: center;
    width: 100%;
  }

  header ul li{
    display: inline-block;
    text-align: center;
    padding: 0 1.0rem;
    margin: 0;
  }

  .footer{
    float: left;
    margin: 4% 5%;
    position: relative;
    width: 90%;
    font-size: 1.2rem;
  }

  .footer ul{
    display: block;
    margin: 0;
    text-align: center;
  }

  .footer ul li{
    float: none;
    display: inline-block;
    text-align: center;
    padding: 0 2rem;
    margin: 0;
  }
  
  .footer p {
    display: block;
    float: none;
    margin: 4% 0;
    padding: 0 2rem;
    text-align: center;
  }

  .container{
    position: relative;
    width: 90%;
    margin: 0 5%;
  }

  .project_brief p {
    font-size: 1.6rem;
    line-height: 3rem;
  }

  h1{
    font-size: 4.0rem;
  }

  h2{
    font-size: 3.2rem;
  }

  h3 {
    font-size: 2.2rem;
    line-height: 1.4;
  }

  h4{
    font-size: 3.0rem;
    line-height: 1.15;
    margin: 0 0 7 % 0;
  }

  h5{
    font-size: 2.2rem;
    line-height: 1.3;
  }

  .button, button, input[type="submit"], input[type="reset"], input[type="button"]{
    height: 35px;
    line-height: 35px;
  }

  .content_style_1, .content_style_3 {
    padding: 12% 0;
  }

  .content_style_4{
     padding: 6% 0 40%;
  }

  .content_style_5{
    padding: 30% 0 7%;
  }

  .profile_pic {
    left: 12%;
    max-width: 70%;
  }

  .content_style_5 .one_column p{
    margin-bottom: 5%;
  }

  .content_style_5 .one_column .one_half_column{
    margin: 0;
  }

  .content_style_5 ul{
    color: #1e2024;
    font-size: 1.6rem;
    font-weight: 400;
  }

  .snapshot {
    margin: 5% 5% 7%;
    width: 90%;
  }

  .project_brief {
    padding: 0 10% 8%;
    text-align: center;
    width: 80%;
  }

  .one_half_column{
    padding: 0 0;
    width: 100%;
  }

  .one_half_column h5{
    margin-bottom: 2%;
  }

  .one_column {
    display: block;
    float: left;
    padding: 0 10%;
    width: 80%;
  }

  .one_column p {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }

  .hero_image P {
    font-size: 1.5rem;
  }

  
}