/*-----------------------------------------------------------

Theme Name: College Journal 
Version: 1.34
Description:Simple responsive layout for actual bloggers or college students, this theme is good for someone who is going to write an article for the news, or just to write some poems or just blog !
Author: Eli Hood
Tags: black,responsive-layout,featured-images,custom-header,white
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
----------------------------------------------------------- */


/*RESET STUFF===============================================*/

*{
margin:0px;
padding:0px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
text-decoration:none;
}
#wpadminbar{
  position: fixed !important;
}

.wp-caption{

}
.wp-caption-text{

}

.gallery-caption {


}
.bypostauthor{


}

.alignright{

}
.alignleft{

}
.aligncenter{

}
.cf:before,
.cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
@font-face{
font-family: 'Futura Std Light';
 src: url('fonts/futura_std_light.eot'); 
 src: url('fonts/futura_std_light.eot?#iefix') format('embedded-opentype'),
  url('fonts/futura_std_light.svg#Futura Std Light') format('svg'), 
  url('fonts/futura_std_light.woff') format('woff'), url('fonts/futura_std_light.ttf') format('truetype'); 
  font-weight: normal; font-style: normal;
}
/*WRAPPER STYLING=============================================================================*/

.wrapper{
width:100%;
height:100%;
background-color:#eee;
position: relative;
margin: 0;


}


.tags{
 width: 100%;
 padding: 30px;

}

.tags > ul{
  list-style-type: none;
  float: right;

}

.tags > ul li{
  float: left;

}


.black{
  color: #000;
  padding: 5px;
}


/*NAV STYLING*/

#trigger{
margin:50px 20px;
color:#000;
font-size:34px;
float:right;
position:fixed;
right:0px;
display:none;
top:0px;
z-index:9999999;
cursor:pointer;
}
.off-canvas{
position:fixed;
right:0px;
width:200px;
height:100%;
background-color:#173233;
z-index:999999;
/*transform*/
-webkit-transform:translateX(100%);
   -moz-transform:translateX(100%);
    -ms-transform:translateX(100%);
     -o-transform:translateX(100%);
        transform:translateX(100%);

  
}
.mobile-menu{
list-style-type:none;
margin:50px 0px;
padding:0px;
width:100% !important;
display:block !important;
}
.mobile-menu li{
display:block;
width:100% !important;
font-family:'Futura Std Light';
}
.mobile-menu li:hover{
text-decoration:underline;
}
.nav{
width:100%;
height:90px;
background-color:#000;
}
.menu{
float:right;
font-size:16px;
margin:0;
padding:0;
list-style-type:none;
}
.menu li{
float:left;
display:inline-block;
width:120px;
line-height:90px;
font-family:'Futura Std Light';
text-align:center;
}
.menu li:hover{
text-decoration:underline;
}
.menu li a{
color:#fff;
text-decoration:none;
}
/*BANNER STYLING=========================*/
.banner_image{
width:100%;
height:400px;
margin:0;
padding:0;
position:relative;
overflow: hidden;


}
.banner_image img{
max-width:100%;
width:100%;
height:400px;
}
.home-link{
position:absolute;
top:40%;
left:0px;
right:0px;
bottom:0px;
color:#fff;
text-align:center;
font-size:50px;
font-family:'Futura Std Light';
}
.site-title{
color:#fff;
font-family:'Futura Std Light';
font-size: 60px;
}
.site-description{
color:#fff;
font-family:'Futura Std Light';
}
/*MAIN STYLING*/
.main{
width:100%;
height:auto;
background-color:#fff;
position:relative;
font-family:'Futura Std Light';
}
.main_wrapper{
width:1200px;
margin:0 auto;
position:relative;
}
#blog{
width:800px;
height:auto;
margin:30px auto;
position:relative;
}
.post{
border:1px solid #000;
height:auto;
padding:20px;
width:750px;
margin:15px auto;
line-height:30px;
color:#fff !important;
font-family:'Futura Std Light';
}
.main_post{
font-size:20px;
}
.title{
font-size:40px;
text-align:center;
}
.title a{
color:#000;
}
.title a:hover{
text-decoration:underline;
}
.archive-title{
text-align:center;
font-size:40px;
padding:20px;
}
blockquote{
  padding: 0px 15px 0px 15px;
  width: 700px;
  margin: 16px 5px 16px 5px;
  font-style: italic;
  border-left: 3px solid #D01F26;
}

blockquote:before{
  font-family: fontawesome;
   content: "\f10d";
   color: #000;
   display: inline-block;

}
blockquote:after{
  font-family: fontawesome;
   content: "\f10e";
   color: #000;
   display: inline-block;

}
.byline{
width:90px;
min-width:90px;
background-color:#000;
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
font-family:'Futura Std Light';
min-height:90px;
position:relative;
color:#fff;
text-align:center;
padding:10px;
}
.byline a{
color:#fff;
}
.perma{
font-size:10px;
text-align:center;
display:block;
}
.main_post{
margin:30px;
color:#000 !important;
line-height:35px;
}
/*EDIT AND COMMENT LINKS*/

#edit_icon{
color:#000;
padding-right:5px;
}
.sticky{
  font-size: 25px;
  color: tomato;
  position: absolute;
  top: 1rem;
  right: 3rem;
}
.edit_link:before{
content:"\f040";
font-family:FontAwesome;
font-weight:normal;
font-style:normal;
padding:0px 5px;
color:#000;
display:inline-block;
}
.edit_comment{
font-size:20px;
margin:0px 30px;
}
.edit_post a{
color:#000;
}
.comment_link{
padding:15px;
}
#comment_icon{
padding-right:5px;
color:#000;
}
/*END LINKS*/

.attachment{
display:block;
text-align:center;
width: 100%;
margin:20px auto;
}
.attachment img{
max-width:100%;

}
/*SIDEBAR STYLING*/
.sidebar{
width:282px;
min-height:600px;
background-color:tomato;
float:right;
display:inline-block;
padding:20px;
}
.widget{
color:#fff;
width:500px;
}
.widget ul{
list-style-type:none;
}
/*========================================COMMENTS SECTION========================*/
.comment-list .depth-2{
margin-left:30px;
}
.comment-list p{
clear:both;
padding:30px;
line-height:25px;
}
.comment-meta, .commentmetadata{
float:left;
}
.comment-list{
border:1px solid #000;
padding:10px;
width:750px;
background-color:#eee;
list-style-type:none;
}
.comment-body{
background-color:#eee;
}
.comment-list li{
margin:20px 10px;
list-style-type:none;
}
.comment-list .reply{
width:89%;
list-style-type:none;
border-bottom:1px dashed #000;
word-wrap:break-word;
clear:both;
}
.comment-author{
float:left;
max-width:74px;
position:relative;
width:74px;
}
.comment-author .avatar{
display:inline-block;
width:74px;
max-width:74px;
margin-bottom:10px;
float:left;
}
.says{
display:none;
}
.comments-title{
margin:30px;
font-size:30px;
}
.comment-form-author{
}
/*COMMENT FORM=====================================================*/
.comment-form{
width:750px;
margin:20px auto;
padding:20px;
position:relative;
}
label[for]{
display:inline-block;
width:50px;
}
.comment-notes{
font-size:22px;
color:#fff;
}
.comment-reply-title{
font-size:30px;
font-style:italic;
}
div.comment-form form{
padding:0px;
margin:20px 0px;
width:720px;
}
div.comment-respond p{
margin:20px 0px;
width:720px;
}
#author{
padding:10px;
margin:0px 20px;
}
#email{
padding:10px;
margin:0px 20px;
}
#url{
padding:10px;
margin:0px 20px;
}
.comment-form-comment > label{
display:block;
font-size:25px;
margin:20px 0px;
}
label[for="comment"]{
width:200px;
}
#comment{
width:100%;
max-width:100%;
padding:20px;
}
#submit{
padding:10px;
border:none;
border:2px solid #000;
font-size:19px;
width:200px;
background-color:transparent;
}
#submit:hover{
background-color:#fff;
color:#000;
/*transition*/
-webkit-transition:all 500ms ease;
   -moz-transition:all 500ms ease;
     -o-transition:all 500ms ease;
        transition:all 500ms ease;
}
.comment-author{
width:74px;
max-width:74px;
clear:both;
padding:0px 20px;
border:none;
}
.comment-meta{
margin:0px 60px;
}
/*FOOTER STYLING*/

.footer{
width:100%;
min-height:190px;
background-color:#222;
font-family:'Futura Std Light';
}
.widget_container{
width:900px;
margin:0 auto;
position:relative;
}
.footer_widget{
float:left;
width:300px;
margin:20px 0px;
padding:20px;
}
.footer_widget ul{
list-style-type:none;
margin:20px;
padding:0;
}
.footer_widget ul li{
font-size:25px;
margin:20px 0px;
}
.footer_widget ul li a{
color:#fff;
}
.widgettitle{
font-size:30px;
color:#fff;
}
.footer2{
width:100%;
height:70px;
background-color:#333;
position:relative;
font-family:'Futura Std Light';
}
.footer2 span{
line-height:70px;
text-align:center;
display:block;
width:100%;
}
.footer2 span a{
color:#fff;
}
.search_form input{
padding:5px;
outline:none;
}
.search_form{
display:block;
text-align:center;
padding:20px;
}
/*=======================================RESPONSIVE=============================*/
@media only screen and (max-width: 1100px){
  .tags{
    padding: 10px;
    margin: 0;
  }
  .tags > ul{
    float: none;
  }

  .tags > ul li{
  float:none;

  display: block;
  text-align: center;
}

  blockquote{
    width: 100%;
  }
  #wp-user-control-sidebox{
  text-align: center !important;
}
#wp-user-control-usericon{
  float: none !important;
  text-align: center !important;

}
#trigger{display:block;
}
.nav{
display:none;
}
.off-canvas{
display:block;
}
#blog{
width:100%;
padding:0;
}
.main_wrapper{
width:100%;
padding:0px 20px;
margin:0;
}
.post{
width:100%;
margin:40px 0px;
min-height:200px;
}
.edit_link{
display:block;
text-align:center;
}
.comment_link{
display:block;
text-align:center;
}
.title{
padding:40px;
}
.byline{
text-align:center;
float:none;
margin:0 auto;
}
.footer_widget{
display:block;
width:100%;
}
.widget_container{
margin:0;
width:100%;
}
.widgettitle{
text-align:center;
}
.footer_widget ul li{
width:100%;
text-align:center;
}
.comment-list{
width:100%;
margin:0;
}
div.comment-form form{
width:100%;
margin:0;
padding:0;
}
.comment-form{
width:100%;
margin:0;
padding:0;
}
div.comment-respond p{
margin:0px;
width:100%;
}
label[for]{
display:block;
width:100%;
text-align:center;
font-size:30px;
padding:20px;
}
#author{
width:100%;
margin:0;
}
#email{
width:100%;
margin:0;
}
#url{
width:100%;
margin:0;
}
.comment-reply-title{
text-align:center;
padding:20px;
}
}

@media only screen and (max-width: 600px){

.post{
  padding: 4px;

  }

.comments-title{
  text-align: center;
}
.comment-meta, .commentmetadata{
		display:block;
clear:both;
float:none;
text-align:center;
}
.comment-list .depth-2{
margin:0;
padding:0;
}
.main_post{
line-height:20px;
}
.banner_image{
height:200px;
}
.banner_image img{
height:200px;
}
.site-title, .site-description{
font-size:30px;
}