/*   
Theme Name: Ghost Writing 2024
Theme URI: http://lomokev.com
Description: Now with movable contact form
Author: Kevin Meredith
Author URI: http://lomokev.com
Version: 2.1
*/

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: 'Raleway', sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* normalize.css END */

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    /* font-size: 1em; */ /* boilder plate default */
	/* font-size:62.5%;
    line-height: 1.4; */
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles start
   ========================================================================== */


body {
  margin: 0 0 0 0;
  font-size:18px;
  line-height: 1.4;
}

/* test start */

.test{
	background-color:red;
}



#mfPreviewBar{
  display: none;
}

/* test end */

.wrapper {
	/* container in which every thing eles is inside */
	max-width: 1270px;
	margin: 0px auto 0px auto;
	/* centre the page when the screen is larger than 980 */	
	position:relative;
	/* anything positioned in side the .page will be postioned relative to it */
	/* text-align: left;so text of all child elements text is alinded left */
}



 /* default link styles start */

a:link, a:visited {
  color:inherit;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
a:active{
  
}

/* default link styles end */

/* header stuff start */

#header_wrapper{
  /* position:fixed;
  top:0;
  left:0;
  z-index: 9999;
  height:396px; */
  width: 100%;
}

body{
  /* margin-top: 396px;  so that compancat compacate for the height of the header */
}

h2,h3,h4,h5{
  line-height: 110%;
  margin-top: 0;
}

header{
  background-image: url(graphics/header_bg.jpg);
  background-repeat: no-repeat; line-height
  background-position: bottom center;
  background-size: cover;
  color:white;
  padding-bottom: 30px;
  position:relative; /* so that the nav can be placed */
}

header h1{
	margin:0; /* over rides style in normalize pushed the page down by 13px */
}

header h1{
  width: 292px;
  height: 208px;
  background-position: 0px 0px;
}

header h2{
  text-transform: uppercase;
  color:white;
}

header h3{
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 1px;
}

@media only screen and (min-width:930px){ /* everything above small */
  header{
    padding-left: 75px;
    padding-right: 75px;
  }
  header h1{
    float: right;
    margin-top: 55px;
  }
  header h2{
    /* font-family: 'YWFT Ultramagnetic'; */
    font-family: 'Oswald', sans-serif;
  }
  header h2, header h3{
    float: left;
    max-width:750px;
    max-width:750px;
  }
}

@media only screen and (min-width:1200px){ /* large size */
  header h2, header h3{
    max-width:750px;
  }
  header h2{
    font-size: 53px;
    margin-bottom: 20px;
    margin-top: 120px;
  }
  header h3{
    font-size: 20px;
  }
}

@media only screen and (min-width:930px) and (max-width:1199px){ /* one step blow max */
  header h2, header h3{
    max-width:62.5%;
  }
  header h2{
    font-size: 48px;
    margin-bottom: 20px;
    margin-top: 120px;
  }
  header h3{
    font-size: 18px;
  }
}

@media only screen and (max-width:929px){ 
  /* what happens at the smalest size, put logo onto of the heading (no 2nd heading) */
  header{
    padding-left: 30px;
    padding-right: 30px;
  }
  header h1{
    margin: 67px auto 30px auto;
  }
  header h2, header h3{
    text-align: center;
  }
  header h3{
    display: none;
  }
  header h2{
    /* font-family: 'YWFT Ultramagnetic'; */
    font-family: 'Oswald', sans-serif;
  }
}

@media only screen and (max-width:430px){ /* super small screens */
  header{
    padding-left: 15px;
    padding-right: 15px;
  }
  header h2{
    font-size: 20px;
  }
} 

@media only screen and (max-width:359px){ /* super small screens */
  header h1{
    width: 191px;
    height: 135px;
    background-size: 390px 390px !important;
  }
} 

/* desktop navigation start */

header nav{
  position:absolute;
  /* font-family: 'YWFT Ultramagnetic'; */
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 20px;
}

@media only screen and (min-width:930px){ /* everything above small */
  header nav{
    top:26px;
    left:75px;
  }
}

@media only screen and (max-width:929px){ 
    header nav{
    top:15px;
    left:15px;
  }
}

#desktop_menu, #menu_reveal{
  color:#e35f00 !important;
  background-color: white;
}

#menu_reveal{
  cursor: pointer;
  padding:5px 8px 3px 8px;
  width:80px;
}

#menu_reveal .title{
  float:left;
}
#menu_reveal .icon{
  float:right;
  height:18px;
  width:18px;
  margin-top: 5px;
  background-position: -300px 0px;
}

#menu_reveal:hover .icon{
  background-position: -330px 0px;
}

#menu_reveal:hover, #desktop_menu a:hover{
  text-decoration: none;
  color:#6795b8 !important;
}

#services_menu .current_page_item{
   color:#6795b8;
}

#desktop_menu ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#desktop_menu{
  display:none; /*  so that the menu is hidden on first load */
}

@media only screen and (min-width:1091px){ /* menu at it's biggest */
  .services_menu_wrapper{
    /* background-color: orange; */
  }

  .menu-none-services-pages-container{
    width: 140px;
    border-right: 2px solid #e35f00;
    margin-right: 40px;
  }
  .menu-none-services-pages-container, .services_menu_wrapper{
    float: left;
  }
  #desktop_menu{ /* temp values */
    padding: 45px 30px 45px 30px;
  }
}

@media only screen and (min-width:911px){ 
  .services_menu_wrapper{
    width: 700px;
  }

  #services_menu li{
    width: 350px;
    float:left;
  }
}

@media only screen and (max-width:1090px){ 
  /* point where the services drops below the menu and below */


#desktop_menu{ /* temp values */
  padding: 30px 10px 30px 10px;
  }
}


@media only screen and (min-width:911px) and (max-width:1090px){ 
  .services_menu_wrapper{
    /* background-color: green; */
  }
}

@media only screen and (max-width:910px){ 
  .services_menu_wrapper{
    /* background-color: red; */
  }
}

/* desktop navigation end */

/* header stuff end */

 /* page styles start */

 .main_content h2, .main_content h3, .main_content h4, .main_content h5, .main_content h6, .main_content p, .main_content ol, .main_content ul{
  margin-top: 0;
 }

 .main_content p{
  max-width: 750px; /* so that the paragraphs are not to long */
 }

.main_content ul{
  /* font-family: 'YWFT Ultramagnetic'; */
  font-family: 'Oswald', sans-serif;
}
.no_bottom_padding{
  margin-bottom: 5px;
}

.main_content h2, .main_content h3{
  text-transform: uppercase;
}

.orange_heading{
  color:#E35F00;
}
.blue_heading{
  color:#6795b8;
}
.bold_paragraph{
  font-weight: 700;
}

article a:link, article a:visited{
  color: #E35F00;
}

article a:hover, article a:active{
  color: #6795b8;
}


@media only screen and (min-width:1270px){ /* large size */
  .main_content{
    width: 980px;
    margin-left:100px;
    margin-top: 60px;
  }
}

@media only screen and (max-width:1269px){ /* small size */
  .main_content{
    width: calc(100% - 100px);
    margin-left:50px;
    margin-top: 60px;
  }
}

.call_to_action_button{
  /* font-family: 'YWFT Ultramagnetic Bold'; */
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  background-color: #E35F00;
  color:white !important;
  font-size: 23px;
  /* top margin does not work on this element because it's an inline block */
 }

.call_to_action_button:hover{ /* only add hover styles to an actually link not just .call_to_action_button class */
  background-color: #6795B8;
  text-decoration: none;
}

.get_quote{
  /* extra margin top for the get quote button */
  margin-top:40px !important;
}

.page-template-default article{
  margin-bottom: 50px; /* extra padding for the content pages */
}

@media only screen and (min-width:900px){ /* everything above 900w */

  .main_content h2, .main_content h3{
    /* font-family: 'YWFT Ultramagnetic Bold'; */
    font-family: 'Oswald', sans-serif;
  }
  .main_content h2{
    font-size: 45px;
  }

  .main_content h3{
    font-size: 38px;
    margin-top: 56px;
  }
  .main_content ul{
    /* font-family: 'YWFT Ultramagnetic'; */
    font-family: 'Oswald', sans-serif;
    padding-left: 22px;
    font-size: 26px;
    margin-bottom: 47px;
  }
  .bold_paragraph{
    font-size: 20px;
  }

  .main_content li{
    margin-bottom: -5px;
  }

}

@media only screen and (max-width:899px){ /* everything below 900 */

  .main_content h2, .main_content h3{
    /* font-family: 'YWFT Ultramagnetic'; */
    font-family: 'Oswald', sans-serif;
  }
  .main_content h2{
    font-size: 25px;
  }

  .main_content h3{
    font-size: 22px;
    margin-top: 27px;
  }
  .main_content ul{
    /* font-family: 'YWFT Ultramagnetic'; */
    font-family: 'Oswald', sans-serif;
    padding-left: 18px;
    font-size: inherit;
    margin-bottom: 23px;
  }
  .bold_paragraph{
    font-size: inherit;
  }

  .main_content li{
    margin-bottom: 0px;
  }
}

 /* page styles end */

 /* home page stuff start */

 /* roll over trasforamtions */

 .client_type, .ghost_writer_list a, .learn_more, a.our_prices, #menu_reveal, #desktop_menu a{
  transition: color 0.5s;
  -moz-transition: color 0.5s;
  -ms-transition: color 0.5s;
  -o-transition: color 0.5s;
  -webkit-transition: color 0.5s;
 }

.white_on_orange{
  background-color: #e35f00;
  color:white;
}

.white_on_grey{
  background-color: #757575;
  color:white;
}

.white_on_blue{
  background-color: #6795b8;
  color:white;
}

.small_headings{
  /* font-family: 'YWFT Ultramagnetic Bold'; */
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  padding-top: 40px;
  margin-bottom: 45px;
}

@media only screen and (min-width:900px){ /* everything above 900w */
  .segment_wrapper{
    margin-left: 100px;
  }
  .small_headings{
    padding-left: 50px;
    font-size: 23px;
  }
}

@media only screen and (max-width:899px){ /* everything below 900 */
  .segment_wrapper{
    margin-left: 50px;
  }
  .small_headings{
    padding-left: 15px;
    font-size: 16px;
  }
}



#books{
  padding-bottom: 90px;
  display: block;
  width:960px;
  margin: 0 auto 0 auto;
}

@media only screen and (min-width:1130px){
  #books{
    width:960px;
  }
}

@media only screen and (min-width:390px){ /* make books smaller */
  .book_container{
    width:130px;
    margin-left: 15px;
    margin-right: 15px;
  } 
  .book_container h4 {
    margin-top: 30px;
  }
}

@media only screen and (max-width:1129px) and (min-width:555px){
  #books{
    width:480px;
  }
}

@media only screen and (max-width:554px) and (min-width:390px){
  #books{
    width:320px;
  }
}

@media only screen and (max-width:389px){
  #books{
    width:210px;
  }
  .book_container{
    width:85px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .book_container img{
    width:100%;
    height:auto;
  } 
  .book_container h4 {
    margin-top: 15px;
  }
}

.book_container{
  float:left;
}

.book_container.first{
  /*margin-left: 0px;  only for testing should be 0 and all .book_container should be wrapped in contanor that then centered */
}

.book_container h4{
  font-size: 18px;
  /* font-family: 'YWFT Ultramagnetic'; */ /* was 'YWFT Ultramagnetic Bold' but it was to heavy  at the samll size */ 
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  margin-bottom: 5px;  /* was 0 changed on 2016-08-10 */
  line-height: 125%; /* was not there changed on 2016-08-10 */
}

.book_container p{
  font-size: 14px;
  margin-top: 0;
  line-height: 105%;
}




/* our clients start */

#ourclients{
  /* position: relative;  temporary css */
}

.client_logos img{
  width: 100%;
  height: auto;
}

  .client_logos{
    margin-bottom: 40px;
  }

@media only screen and (min-width:900px){ /* everything above 900w */
  .our_client_logos_mobile{
    display:none;
  }
    #ourclients .small_headings{
    display: block;
    width:140px;
    float: left;
  }

  .client_logos{
    float: right;
    margin-right: 100px;
    margin-top: 40px;
    width: calc(100% - 330px);
  }
}

@media only screen and (max-width:899px){ /* everything below 900 */
  .our_client_logos_wide{
    display:none;
  }
  .client_logos{
    width: calc(100% - 100px); /* 50px paddong either side */
    margin-left: 50px;
  }
}

/* our clients end */



@media only screen and (min-width:900px){ /* everything above 900w */
  .three_in_a_row_container, .two_in_a_row_container{
    /* margin-left: 100px; */
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .three_in_a_row{
    float: left;
    border-left: 2px solid #6795b8;
  }
}

@media only screen and (min-width:1270px){
  .three_in_a_row{
    width: 290px;
    padding-right: 40px;
    padding-left: 40px;
  }
}

@media only screen and (min-width:900px) and (max-width:1269px){ 
  .three_in_a_row{
    width: 22.83%;
    padding-right: 3.14%;
    padding-left: 3.14%;
  }
}

@media only screen and (max-width:899px){ /* everything below 900 */
  .three_in_a_row{
    border-top: 2px solid #6795b8;
    margin-bottom: 20px;
    padding-top: 20px;
    width: calc(100% - 50px); /* because of the 50px margin on the left */
    display: block; /* so that styling works with a elements */
  }
  .sub_heading, .blue_heading{
    width: calc(100% - 50px);
  }
  .main_content .blue_heading{
    width: 100%;
  }
  .three_in_a_row_container{
    /* background-color: blue; */
    margin-top: 25px;
    margin-bottom: 50px;
  }
}

@media only screen and (min-width:952px){ /* everything above 851 */

  .two_in_a_row{
    float: left;
    width: 365px;
    padding-right: 40px;
    padding-left: 40px;
    border-left: 2px solid #6795b8;
    padding-bottom: 50px;
    /* background-color: red; */
  }

  .two_in_a_row.left_column{
    border-left:none;
    padding-left: 0;
  }

  .two_in_a_row.last_row{
    padding-bottom: 0;
  }

}

@media only screen and (max-width:951px){ /* everything above 851 */
    .two_in_a_row{
      margin-bottom: 40px;
      width: calc(100% - 50px);
    }
}

.our_prices{
  /* font-family: 'YWFT Ultramagnetic'; */
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
}

a.our_prices:hover{
  text-decoration: none;
  color:#6795b8;
}

.our_prices p{
  line-height: 130% !important;  /* was 110% changed on 2016-08-10 */
}

.service{
  font-size: 18px;
  display: block; /* service is now a link so it needs to block */
}

.in_a_row h4{
  margin-bottom: 5px; /* was 0 changed on 2016-08-10 */
  /* font-family: 'YWFT Ultramagnetic'; */
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

.in_a_row p{
  margin-top: 0;
  margin-bottom: 0;
  line-height: 23px;
}

.in_a_row.our_prices p{
  line-height: 150% !important;
}

.three_in_a_row:first-child{
  border-left: none; /* for when they are side by side */
  padding-left: 0; /* for when they are side by side */
  border-top: none; /* for when they are on top of each other */
  padding-top: 0; /* for when they are on top of each other */
}

.none_body_link:hover{
  text-decoration: none;
}

.learn_more{
  /* font-family: 'YWFT Ultramagnetic Bold'; */
  font-family: 'Oswald', sans-serif;
}

.service:hover .learn_more{
  color:#6795b8;
}



@media only screen and (min-width:900px){ /* everything above 900w */
  .in_a_row h4{
    font-size: 31px;
  }
  #services_wrapper{
    margin-bottom: 75px;
  }
  .learn_more{
     /*  font-family: 'YWFT Ultramagnetic Bold'; */
    font-family: 'Oswald', sans-serif;
    margin-top: 20px;
    font-size: 20px;
  }
  .price{
    font-size: 31px;
    margin-top: 10px;
  }
}

@media only screen and (max-width:899px){ /* everything below 900 */
  .in_a_row h4{
    font-size: 21px;
  }
  .in_a_row p{
    font-size: 14px;
    line-height: 100%;
  }
  #services_wrapper{
    margin-bottom: 50px;
  }
  .learn_more{
    /* font-family: 'YWFT Ultramagnetic Bold'; */
    font-family: 'Oswald', sans-serif;
    margin-top: 15px;
    font-size: 13px;
  }
  .price{
    font-size: 20px;
    position:relative;
    top:10px;
  }
}




/* ghost write list start */

.ghost_writer_list{
  margin-top: 70px;
  margin-bottom: 70px;
}

.ghost_writer_list h3, .client_type h3{
  margin-bottom: 5px; /* value was not here changed on 2016-08-10 */
}

.ghost_writer_list ul{
  list-style: none;
  padding-left: 0;
}

.ghost_writer_list ul li{
  /* font-family: 'YWFT Ultramagnetic'; */
  font-family: 'Oswald', sans-serif;
  color: #e35f00;
  text-transform: uppercase;
  margin-bottom: 8px;
}

@media only screen and (min-width:900px){ /* everything above 900w */
  .ghost_writer_list ul li{
    font-size: 28px;
  }
}

@media only screen and (max-width:899px){ /* everything below 900 */
  .ghost_writer_list ul li{
    font-size: 19px;
    margin-right: 50px;
  }
}

@media only screen and (min-width:1130px){ /* everything above 1129 */

  .ghost_writer_list ul li{
    display: inline-block;
  }

  .ghost_writer_list ul li:nth-child(odd){
    width: 365px;
  }

  .ghost_writer_list ul li:nth-child(even){
    width: calc(100% - 465px);
  }

}

@media only screen and (max-width:1129px){ /* everything blow 1130 */
  .ghost_writer_list ul li{
    display: block;
  }
}

.ghost_writer_list a:hover{
  text-decoration: none;
  color: #6795B8;
}

/* ghost write list end */



.which_are_you_wrapper p{
  margin-top: 0;
  font-size: 18px;
  line-height: 110%;
}

.client_type{
  display: block;
}

.client_type:hover{
  text-decoration: none;
  color:black;
}

@media only screen and (min-width:900px){ /* everything above 900w */

  .client_type{
    width:calc(50% - 86px);
  }

  #gutter-sizer{
    width: 70px;
  }

  .which_are_you_wrapper{
    padding-bottom: 100px;
  }

}

@media only screen and (max-width:899px){ /* everything below 900 */

  .client_type{
    width:calc(100% - 50px);
  }

  #gutter-sizer{
    width: 0;
  }

  .which_are_you_wrapper{
    padding-bottom: 50px;
  }

}

.front_page_heading{  text-transform: uppercase;
  /* font-family: 'YWFT Ultramagnetic Bold'; */
  font-family: 'Oswald', sans-serif;
  margin-bottom: 0;
}

@media only screen and (min-width:900px){ /* everything above 900w */
  .front_page_heading{
    font-size: 45px;
  }
  .sub_heading{
    font-size: 26px;
  }
}

@media only screen and (max-width:899px){ /* everything below 900 */
  .front_page_heading{
    font-size: 25px;
  }
  .sub_heading{
    font-size: 20px;
  }
}

/* big quote start */

.big_quote p{
  text-transform: uppercase;
  /* font-family: 'YWFT Ultramagnetic Bold'; */
  font-family: 'Oswald', sans-serif;
  line-height: 120%;  /* was 105% changed on 2016-08-10 */
  position: relative;
}

.big_quote p:before, .big_quote p:after{
  display: block;
  content: '';
  position: absolute;
}

@media only screen and (min-width:900px){ /* everything above 900w */
  .big_quote{
    padding-top: 45px;
    padding-bottom: 55px;
  }
  .big_quote p{
    width: calc(100% - 280px);
    margin-left: 90px;
    font-size: 35px;
  }
  .big_quote p:before, .big_quote p:after{
    width:56px;
    height:54px;
  }
  .big_quote p:before{
    top:0;
    left:-90px;
    background-position: 0px -209px;
  }
  .big_quote p:after{
    bottom:0;
    right:-90px;
    background-position: -60px -209px;
  }
}

@media only screen and (max-width:899px){ /* everything below 900 */
  .big_quote{
    padding-top: 28px;
    padding-bottom: 35px;
  }
  .big_quote p{
    width: calc(100% - 50px);
    font-size: 22px;
  }
  .big_quote p:before, .big_quote p:after{
    width:28px;
    height:27px;
    background-size: 300px 300px !important;
  }
  .big_quote p:before{
    top:-4;
    left:-40px;
    background-position: 0px -104px;
  }
  .big_quote p:after{
    bottom:0;
    right:-40px;
    background-position: -30px -104px;
  }
}

/* big quote end */



/* contact from start */

.contact_from_heading{
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

@media only screen and (min-width:741px){ /* everything above 881w */
  .contact_from_heading{
    font-size: 38px;
    padding-top: 30px;  /* was 60 */
    padding-bottom: 30px; /* was 60 */
    margin-left: -50px;
  }
}

@media only screen and (max-width:740px){ /* everything below 880 */
  .contact_from_heading{
    padding-top: 20px;  /* was 60 */
    padding-bottom: 20px; /* was 60 */
    margin-left: -40px;
  }
}

@media only screen and (max-width:740px) and (min-width:601px){ /* everything below 880 */
  .contact_from_heading{
    font-size: 30px;
  }
}


@media only screen and (max-width:600px) and (min-width:411px){ /* everything below 880 */
  .contact_from_heading{
    font-size: 20px;
  }
}

@media only screen and (max-width:410px){ /* everything below 880 */
  .contact_from_heading{
    font-size: 18px;
  }
  .arrow{
    display: none;
  }
}


.page-template-default .contact_section_extra_pad{
  padding-bottom: 50px;
}

form{

}

label, .wpcf7-not-valid-tip, div.wpcf7-response-output, input[type=submit]{
  /* font-family: 'YWFT Ultramagnetic'; */
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

label{
  color: #e35f00;
  margin-right: 10px;
}


textarea{
  border-color: #e35f00;
  border-top-color:  #e35f00;
}

div.wpcf7-response-output{
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color:red;
}

div.wpcf7-mail-sent-ok{
    color:#6795b8;
}

input[type=submit], .call_to_action_button{ /* also styles the call to action button */
  background-color: #e35f00;
  border: none;
  color: white;
  /* padding: 7px 10px 0 10px; */
  padding: 5px 10px 5px 10px; 
  cursor: pointer;
  transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
}

input[type=submit]:hover, .call_to_action_button:hover{
  background-color: #6795b8;
}

.wpcf7-recaptcha{
  margin-bottom: 20px;
}

.from_question_mark{
  cursor: pointer;
  color:#6795b8;
  /* font-family: 'YWFT Ultramagnetic'; */
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

.form_answers{
  display: none;
  margin-right: 50px;
}

.form_question{
  color:#6795b8;
  font-weight: 700;
}

.form_answer{

}

@media only screen and (min-width:900px){ /* everything above 900w */
  label, .wpcf7-not-valid-tip, div.wpcf7-response-output, input[type=submit],.from_question_mark{
    font-size: 28px !important;
  }
  select, input[type=text], input[type=email] {
    position: relative;
    top:-5px;
  }
  textarea{
    max-width:800px;
    height:200px;
  }

}

@media only screen and (max-width:899px){ /* everything below 900 */
  label, .wpcf7-not-valid-tip, div.wpcf7-response-output, input[type=submit], .from_question_mark{
    font-size: 14px !important;
  }
  .contact_section .segment_wrapper{
    margin-left: 15px;
  }
  select, input[type=text], input[type=email],textarea {
    max-width:calc(100% - 15px);
    font-size: 13px;
  }
  textarea{
    height:150px;
  }
  /*
  .wpcf7-form-control-wrap, .wpcf7-recaptcha{
    width:calc(100% - 15px);
    overflow: hidden;
  }
  .wpcf7-recaptcha{
    width:calc(100%);
    overflow: hidden;
  }*/
  .g-recaptcha { /* code from http://stackoverflow.com/questions/27691411/change-new-google-recaptcha-width */
      -webkit-transform: scale(0.89);
         -moz-transform: scale(0.89);
          -ms-transform: scale(0.89);
           -o-transform: scale(0.89);
              transform: scale(0.89);
       -webkit-transform-origin: 0 0;
          -moz-transform-origin: 0 0;
           -ms-transform-origin: 0 0;
            -o-transform-origin: 0 0;
               transform-origin: 0 0;
  }
  .wpcf7-form-control-wrap{
    width: calc(100% -15px);
  }
}

/* contact from end */

 /* home page stuff end */

footer{
	background-color:#DDDDDD;
}

#social_media_icons{
  float:right;
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0; /* removed default padding from the list */
}

#social_media_icons li{
  display: inline-block;
}

.social_icon{
  display: block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.facebook{         background-position:0px -30px; }
.facebook:hover{   background-position:0px -45px; }
.twitter{         background-position:-15px -30px; }
.twitter:hover{   background-position:-15px -45px; }
.instagram{       background-position:-30px -30px; }
.instagram:hover{ background-position:-30px -45px;}

#footer_info{
  float:left;
}

/* page quote is showin the tinyMCE drop down and also must be in the editor-style.css or the srtyle wont show in the tinyMCE */
.page_quote{
	color:#32237b;
	text-align:center;
	font-weight:bold;
	font-style:italic;
}

/* ==========================================================================
   Author's custom styles end
   ========================================================================== */


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* add this class to elements that you want there text content hidden add by me */

.hide_text{
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
  /* for elements were the background is an image and the text needs to hidden */
}

/* elements with background image SVG */

header h1, .social_icon, .big_quote p:before, .big_quote p:after, #menu_reveal .icon{
  /* background-image: url(fallback.png); */
  background-image:
    linear-gradient(transparent, transparent),
    url(graphics/sprite-map.svg);
     /* also need below which says the background size */
     background-size: 600px 600px;
}

/* sidebar */

#sidebar{

}

.widget{

}

.widget ul, .widget ol{
  list-style: none;
  padding-left: 0px;
}

/* image styles for embedded images start */

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-container img {
  max-width: 100%; /* When images are too wide for containing element, force them to fit. */
  height: auto; /* Override height to match resized width for correct aspect ratio. */
}

@media only screen and (min-width:600px){ /* large */
  .alignleft,
  img.alignleft {
    display: inline;
    float: left;
    margin-right: 24px;
    margin-top: 4px;
  }
  .alignright,
  img.alignright {
    display: inline;
    float: right;
    margin-left: 24px;
    margin-top: 4px;
  }
  .aligncenter,
  img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-width:599px){ /* small */
  .alignleft,
  img.alignleft,
  .alignright,
  img.alignright,
  .aligncenter,
  img.aligncenter  {
    display: block;
  }
}

img.alignleft,
img.alignright,
img.aligncenter {
  margin-bottom: 12px;
}

.wp-caption {
  /* background: #f1f1f1; */
  line-height: 18px;
  margin-bottom: 20px;
  max-width: 725px !important; /* prevent too-wide images from breaking layout / max with of the layout */
  padding: 0;
  text-align: center;
}
.wp-caption img {
  margin: 5px 5px 0;
  max-width: 622px; /* caption width - 10px */
}
.wp-caption p.wp-caption-text {
  color: black;
  font-size: 15px;
  margin: 5px;
}

/* image stayels styles for embedded images end */

/* link styles for inside the articles start / sometimes pages will not use the Article element so there container will have to added here to */

/* link styles for inside the articles end */

/* different styles for different break points */

/* junk CSS removed */


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}