/*
 Theme Name:   IO10 blog (Casper-child)
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       IO10
 Author URI:   http://insideout.io
 Template:     casper
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  ???
*/

@import url(//fonts.googleapis.com/css?family=Merriweather:400,700,300);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(//fonts.googleapis.com/css?family=Muli|Roboto+Mono|Volkhov);

body {
    position: relative;
    left: 0px;
    color: #3a4145!important;
    font-family: "Muli",serif!important;
    font-feature-settings: "kern"!important;
    font-size: 1.8rem;
    letter-spacing: 0.01rem!important;
    line-height: 1.75em;
    text-rendering: geometricprecision;	
    
    -webkit-transition: left .4s;
    -o-transition: left .4s;
    transition: left .4s;
}

#site-navigation {
    position: fixed;
    right: -300px;
    width: 300px;
    height: 100%;
    color: #eee;
    background-color: #222;
    padding-top: 80px;
    z-index: 10000;
    
    -webkit-transition: right .4s;
    -o-transition: right .4s;
    transition: right .4s;
}

body .site-head {height:40%}

.menu ul {margin:0;}
.main-navigation li {float:none!important; width:100%;}
.main-navigation li a:hover {color:#ffffff!important}

.main-navigation ul {float:left!important; width:100%;}
.main-navigation li {color:#ffffff}
body.menu-opened {
    left: -300px;
}

body.menu-opened #site-navigation {
    right: 0px;
}

a:hover{color:#000000;}

.post-content p {
	font-size:0.9em!important;
	line-height:1.7em;
}

h1 {
	line-height:1.15em!important; 
    font-size:3.6rem; 
    margin-bottom:20px;
}

.post-title a { 
    font-size:3.6rem;
    line-height:1.15em;
}

.post-image img {margin:0; padding:0; width:100%}

#menu-toggle {
    z-index: 10001;
    border: 1px solid #000;
    cursor: pointer;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    right: 20px;
    background-color:#ffffff;
    top: 20px;

    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

body.menu-opened #menu-toggle {
    color: #eee;
    background-color: #222;
    margin-right: -100px;
    border: none;
}

#menu-toggle-x {
    display: none;
}

#menu-toggle a, #menu-toggle a:hover {
    color: white;
}

body.menu-opened #menu-toggle-x {
    display: inline;
    position: relative;
    left: 200px;
    padding-right: -200px;
}

#masthead {
    padding: 0;
}

.pg-canvas {
    position: absolute;
    z-index: -1;
    left: 0;
}
.site-head{ background-color:transparent!important;}

body.page-id-2 div#info-contact {  background: #f1f1f1 url(http://blog.insideout.io/en/wp-content/uploads/2015/06/about-us_insideout.jpg);
  background-position: 100% 0 !important;
  background-repeat: no-repeat !important;}



body.page-id-2 .hentry {max-width:1170px; margin-top:0;}

body.page-id-2 .post-title {display:none}

body.page-id-2 #masthead {margin-bottom:0}

a.blog-logo:hover {color:#000000!important}

.post-meta {
	color: #9eabb3;
    display: inline-block;
    font-family: "Open Sans",sans-serif;
    font-size: 1.5rem;
    margin: 0 0 5px; 
}
.post-meta .posted-on {
	 font-size: 1.3rem;
}
	
.byline {font-size:1.5rem}
.posted-on {text-transform: uppercase;}
.post {padding-bottom:25px}

.icon-bars:before { font-size:12px!important}
.icon-bars {padding:2px 17px!important; border-radius:3px!important;}
.icon-bars span{ font-family:"Open Sans",sans-serif; font-size:12px; text-transform:uppercase; }
.main-navigation a {padding:0; color:#e1e1e1; font-family:"Merriweather",serif; font-size:1.4rem;}

body.single-post article .post-header img {width:100%}
.post-content img { width:100%; margin:0 0 10px 0; padding:0;}

body.single-post .byline {display:none}
body.single-post .post-title {margin:0; padding:0}
body.blog h1 {margin-bottom:20px}

.author-single-post {float:left}
.share-buttons {float:right; font-family:"Open Sans",sans-serif;}
body.menu-opened #menu-toggle:hover {color:#f8f8f8!important}

.blog-description  { font-family:"Merriweather",serif; font-size:2rem; font-weight:400; color:rgba(0, 0, 0, 0.5)!important; text-shadow:none!important}

.older-posts, .newer-posts {border-radius:3px!important;}

.copyright {float:left; width:30%; text-align: left;
  padding-left: 20px; font-size:1rem}
.copyright-dx {float:right; width:30%; text-align: right;
  padding-right: 20px; font-size:1rem}

.site-footer .site-info { width:100%; max-width:none; padding-top:4em; color:#99a3a7!important}

.ssba_facebook_share, .ssba_twitter_share, .ssba_google_share {width:19px; height:19px; display:block; padding:5px 10px; float:left; color:#BBC7CC; font-size:1.2em; margin-top:7px;}

.ssba_facebook_share:hover { color:#395a93!important;}
.ssba_twitter_share:hover {color:#6bbaeb!important;} 
.ssba_google_share:hover {color:#dd4d3b!important;}
.ssba-wrap {line-height:1!important}

.avatar {box-shadow:none!important; padding:0!important;} 

.info-text {
    background-color: #FFFFFF;
    padding: 10px;
    font-size: 90%;
}

.main-navigation ul {
    width: 90%!important;
}

#menu-item-762 { border-bottom:1px solid }
#menu-item-1015, #menu-item-1016, #menu-item-1017, #menu-item-1018, #menu-item-1019 {font-style:italic!important;}

@media screen and (max-width: 600px) {
		#menu-item-218 { border-bottom:1px solid }
 .main-navigation ul {display:block!important; background-color:transparent!important}
 .main-navigation ul li {border-bottom:none}
}
