/*
Theme Name: The J
Theme URI: 
Description: WordPress Jenka Theme
Version: 1.0
Author: Jenka
Author URI: http://www.jenka.fr/
Tags: minimal, product, portfolio, blog, creative, responsive, customizable, fluid, clean

*/

/* ****************************************************************************
		reset
**************************************************************************** */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:inherit;font-weight:inherit}
del,ins{text-decoration:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:baseline}
sub{vertical-align:baseline}
legend{color:#000}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{font-size:100%}
a {cursor:pointer}

.clearfix:before,
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	overflow: hidden
}
.clearfix:after {clear: both}
.clearfix {zoom: 1}

/* ************************************************************************************************
		@font-face
************************************************************************************************ */

@font-face {
  font-family: 'Montserrat-Hairline';
  src:  url('fonts/Montserrat-Hairline.eot?#iefix') format('embedded-opentype'),  
      url('fonts/Montserrat-Hairline.otf')  format('opentype'),
      url('fonts/Montserrat-Hairline.woff') format('woff'), 
      url('fonts/Montserrat-Hairline.ttf')  format('truetype'), 
      url('fonts/Montserrat-Hairline.svg#Montserrat-Hairline') format('svg');
}

@font-face {
  font-family: 'Montserrat-Light';
  src:  url('fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),  
      url('fonts/Montserrat-Light.otf')  format('opentype'),
      url('fonts/Montserrat-Light.woff') format('woff'), 
      url('fonts/Montserrat-Light.ttf')  format('truetype'), 
      url('fonts/Montserrat-Light.svg#Montserrat-Light') format('svg');
}


@font-face {
  font-family: 'Montserrat-Regular';
  src:  url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),  
      url('fonts/Montserrat-Regular.otf')  format('opentype'),
      url('fonts/Montserrat-Regular.woff') format('woff'), 
      url('fonts/Montserrat-Regular.ttf')  format('truetype'), 
      url('fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
}

@font-face {
  font-family: 'Montserrat-Bold';
  src:  url('fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),  
      url('fonts/Montserrat-Bold.otf')  format('opentype'),
      url('fonts/Montserrat-Bold.woff') format('woff'), 
      url('fonts/Montserrat-Bold.ttf')  format('truetype'), 
      url('fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg');
}

@font-face {
  font-family: 'Montserrat-Black';
  src:  url('fonts/Montserrat-Black.eot?#iefix') format('embedded-opentype'),  
      url('fonts/Montserrat-Black.otf')  format('opentype'),
      url('fonts/Montserrat-Black.woff') format('woff'), 
      url('fonts/Montserrat-Black.ttf')  format('truetype'), 
      url('fonts/Montserrat-Black.svg#Montserrat-Black') format('svg');
}

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

}

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

}

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

}


/* ************************************************************************************************
		General
************************************************************************************************ */

body {
background-color: #EEEEEE;
font-family: "Montserrat-Light", Arial, sans-serif !important;
text-align: left;
font-size: 1rem;
line-height: normal !important;
color: #000000;	
padding: 3rem 0 !important;
}

a, a:visited, a:hover {
color: #a7a7a7;
text-decoration: none;
outline: 0;
}

a:hover {
color: #46EEA0;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
margin-top: 0;
margin-bottom: 0;
}

.textRight{
	text-align: right;
}

.page-content{ 
  background: #fff; 
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 5px;
}

/* ************************************************************************************************
		Header
************************************************************************************************ */
#logo{ 
  line-height: 0; 
  display: block;
  height: 100px;
  width: 134px;
  font-size: 0;
}
.header{ margin-bottom: 2rem !important;}
.header .menu-typo{ 
  float: right;
  line-height: 100px;
  text-transform: uppercase;
  color: #a7a7a7;
  font-size: 1rem;
  padding-right: 1rem;
}
#trigger-overlay{ 
  width: 100px;
  height: 100px;
  float: right;
  border: none;
  cursor: pointer;
}


/* Overlay style */
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(70,238,160,0.7);
}

/* Overlay closing cross */
.overlay .overlay-close {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 20px;
  top: 20px;
  overflow: hidden;
  border: none;
  background: url(images/cross.png) no-repeat center center;
  text-indent: 200%;
  color: transparent;
  outline: none;
  z-index: 100;
}

/* Menu style */
.overlay nav {
  text-align: center;
  position: relative;
  top: 50%;
  height: 60%;
  font-size: 4rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: 'Montserrat-Black';
  text-transform: uppercase;
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}

.overlay ul li {
  display: block;
  height: 20%;
  height: calc(100% / 5);
  min-height: 54px;
}

.overlay ul li a {
  font-weight: 300;
  display: block;
  color: #fff;
  line-height: normal;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
  color: #F7B680;
}

/* Effects */
.overlay-hugeinc {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  z-index: 1000;
}

.overlay-hugeinc nav {
  -webkit-perspective: 1200px;
  perspective: 1200px;
}

.overlay-hugeinc nav ul {
  opacity: 0.4;
  -webkit-transform: translateY(-25%) rotateX(35deg);
  transform: translateY(-25%) rotateX(35deg);
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
  -webkit-transform: translateY(25%) rotateX(-35deg);
  transform: translateY(25%) rotateX(-35deg);
}

@media screen and (max-height: 30.5em) {
  .overlay nav {
    height: 70%;
    font-size: 34px;
  }
  .overlay ul li {
    min-height: 34px;
  }
}

/* ************************************************************************************************
    Sidebar + widget + Main
************************************************************************************************ */
.sidebar .down{ margin-bottom: 3rem;}
#in_search{ 
  padding: 0.5rem;
  background: #eee;
  border: none;
  border-radius: 5px;
  text-transform: uppercase;
}

.content h1{
  font-size: 2rem;
  line-height: normal;
  text-transform: uppercase;
  border-bottom: 1px solid #eee;
  margin-bottom: 2.5rem;
  font-family: 'Montserrat-Black';
}

.content h6{
  text-transform: uppercase;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: normal;
  font-family: 'Montserrat-Bold';
}

.date{ 
  font-family: 'Montserrat-Bold';
  text-transform: uppercase;
  text-align: center;
  line-height: normal;
  background: #eee; 
  border-radius: 100%;
  color: #828282;
}

.loop_article{
  margin-bottom: 3rem;
}

  .loop_article h3{
    margin-top: 1rem;
    font-family: 'Montserrat-Bold';
    font-size: 1.313rem;
    line-height: normal;
  }

  .loop_article h3 a{
     color: #000;
  }

  .loop_article .post-category{
    margin: 0.8rem 0;
  }
  .loop_article .post-category a{
    color: #ccc;
    text-transform: uppercase;
    font-size: 0.750rem;
    line-height: normal;
    border-radius: 5px;
    padding: 0.2rem;
    border: 1px solid #ccc;
  }

  .loop_article .post-more ul li{
    display: inline-block;
    margin-top: 1.5rem;
  }

  .loop_article .post-more .morelink{ float: right;}
  .loop_article .post-more .nbcomment a{ 
    color: #828282; 
    border-radius: 5px; 
    background: #eee; 
    padding: 0.5rem;
    margin:  0 0 8px 0;
    position: relative;
    box-shadow: 0 3px #ccc;
  }

  .loop_article .post-more .nbcomment a:hover{
    box-shadow: 0 0 #ccc;
    top: 3px;
  }
  .loop_article .post-more .nbcomment a:active{
    box-shadow: 0 0 #ccc;
    top: 3px;
    background: #ccc;
  }

  .loop_article .post-more .morelink a{ 
    color: #fff; 
    border-radius: 5px;
    background: #46EEA0; 
    padding: 0.5rem;
    margin:  0 0 8px 0;
    position: relative;
    box-shadow: 0 3px #29905f;
  }

  .loop_article .post-more .morelink a:hover {
    box-shadow: 0 0 #29905f;
    top: 3px;
  }

  .loop_article .post-more .morelink a:active {
    box-shadow: 0 0 #29905f;
    top: 3px;
    background: #29905f;
  }


.single h1{
  border-bottom: none;
  margin: 1rem 0;
}

.single .post-info{ font-size: 0.750rem;}

.single .post-content{
  margin: 1rem 0 3rem;
  line-height: normal;
}

.single .post-comments h3{
  font-family: 'Montserrat-Bold';
  font-size: 1.313rem;
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.single .post-comments input{
  border-radius: 5px;
  border: none;
  background: #eee;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.single .post-comments textarea{
  border-radius: 5px;
  border: none;
  background: #eee;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.single .post-comments #submit{
  background: #46EEA0;
  position: relative;
  box-shadow: 0 3px #29905f;
  color: #fff;
  cursor: pointer;
  margin:  0 0 8px 0;
}

.single .post-comments #submit:hover {
  box-shadow: 0 0 #29905f;
  top: 3px;
}

.single .post-comments #submit:active {
  box-shadow: 0 0 #29905f;
  top: 3px;
  background: #29905f;
}

/* ************************************************************************************************
		Footer
************************************************************************************************ */
.footer{
  padding: 1rem 20px;
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;
}
  .footer-section{ line-height: 0;}
  .footer .logo-credit{ font-size: 0; height: 30px;}
  .footer p{ text-transform: uppercase; color: #cdcdcd; font-size: 0.875rem; line-height: 30px;}
  .footer span{ color: #46EEA0;}


/* ************************************************************************************************
    Plugin
************************************************************************************************ */
#scrollUp{ 
  bottom: 45px; 
  right: 30px; 
  width: 51px;
  height: 51px;

}

#scrollUp:hover{ background: url(images/top-hover.png) no-repeat}

/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

@media handheld, only screen and (max-width: 1680px) {}


/* ============================= */
/* ! Layout for tablet version   */
/* ============================= */

@media handheld, only screen and (max-width: 1025px) {}


/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 768px) {
  body{ padding-top: 2rem !important; padding-bottom: 0 !important;}
  .header .logos{ float: left !important;}
  .sidebar{ display: none;}
  .page-content{ width: auto !important;}
  /*.content .main{ padding-left: 0 !important; padding-right: 0 !important;}*/
  .main .date, .main .loop_article{ padding-left: 0 !important; padding-right: 0 !important;}
  .date{ background: transparent; margin-bottom: 1rem;}
  .single .post-comments textarea{ width: 100%; box-sizing: border-box; }
  .footer{ padding-left: 0 !important; padding-right: 0 !important;}
  .footer .logo-credit{ background-position: 50% !important}
  .footer-section, .footer-section .textRight{ text-align: center;}
}

@media handheld, only screen and (max-width: 640px) {}
@media handheld, only screen and (max-width: 480px) {
  .header .menu-typo{ display: none;}
  .overlay nav{ font-size: 3rem;}
}


/* =============================================== */
/* ! Provide higher res assets for Retina iPhone   */
/* =============================================== */

@media only screen and (-webkit-max-device-pixel-ratio: 1.5),
 only screen and (-o-max-device-pixel-ratio: 3/2),
 only screen and (max--moz-device-pixel-ratio: 1.5),
 only screen and (max-device-pixel-ratio: 1.5) {
  #logo{ background: url(images/logo-green.jpg) no-repeat center center #46EEA0;}
  #trigger-overlay{ background: url(images/menu.gif) no-repeat center center #000;}
  #trigger-overlay:hover{ background: url(images/menu.gif) no-repeat center center #46EEA0;}
  .footer .logo-credit{ background: url(images/logo-credit.png) no-repeat;}
  #scrollUp{ background: url(images/top-pink.png) no-repeat;}
  #scrollUp:hover{ background: url(images/top-hover.png) no-repeat;}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (-o-min-device-pixel-ratio: 3/2),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
  #logo{
    background: url(images/logo-green@2x.jpg) no-repeat center center #46EEA0;
    background-size: 134px;
  }
  #trigger-overlay{ background: url(images/menu@2x.gif) no-repeat center center #000; background-size: 100px}
  #trigger-overlay:hover{ background: url(images/menu@2x.gif) no-repeat center center #46EEA0; background-size: 100px}
  .footer .logo-credit{ background: url(images/logo-credit@2x.png) no-repeat; background-size: 84px;}
  #scrollUp{ background: url(images/top-pink@2x.png) no-repeat; background-size: 51px;}
  #scrollUp:hover{ background: url(images/top-hover@2x.png) no-repeat; background-size: 51px;}
}