/*
Theme Name: Platz
Theme URI: 
Author: Dcrazed
Author URI: https://dcrazed.com/
Description: Platz is a free grid wordpress theme with responsive design for showing digital products, freebies similar to websites like freepik. Let your users upload images, content to your website and have their own author marketplace.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, four-columns, responsive-layout, featured-images, fixed-width-template, blogging, freebie
Text Domain: platz
    
*/

/*-------------------------*/
/* SOCIAM FONT ICON */
/*-------------------------*/

@font-face {
    font-family: 'socialicoregular';
    src: url('font/socialico-webfont.eot');
    src: url('font/socialico-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/socialico-webfont.woff2') format('woff2'),
         url('font/socialico-webfont.woff') format('woff'),
         url('font/socialico-webfont.ttf') format('truetype'),
         url('font/socialico-webfont.svg#socialicoregular') format('svg');
}

@font-face {
    font-family: 'socialico_plusregular';
    src: url('font/socialico_plus-webfont.eot');
    src: url('font/socialico_plus-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/socialico_plus-webfont.woff2') format('woff2'),
         url('font/socialico_plus-webfont.woff') format('woff'),
         url('font/socialico_plus-webfont.ttf') format('truetype'),
         url('font/socialico_plus-webfont.svg#socialico_plusregular') format('svg');
}

/*-------------------------*/
/* DON'T TOUCH  */
/*-------------------------*/

.disable-hover {
	pointer-events: none;
}

img{vertical-align:bottom;}

a {
	text-decoration:none;
}

ul { 
	list-style-type: none; 
	margin:0;
	padding:0;
}

/*-------------------------*/
/* MAIN CLASS TRANSITION FOR EFFECT HOVER*/
/*-------------------------*/

.object {
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.25s ease-in-out; /** Firefox **/
    -o-transition: all 0.25s ease-in-out; /** Opera **/
}

/*----------------------------*/
/* BODY SETTINGS */
/*----------------------------*/

body,html{
	padding:0;margin:0;
	background-color:#F4F4F4;
}

.cache{
	width:100%;
	height:100%;
	position:absolute;
	background-color:#FFF;
	z-index:1000;
}

/*----------------------------*/
/* CUSTOM SCROLLBAR  */
/*----------------------------*/

::-webkit-scrollbar {
    width: 9px;
}
 
::-webkit-scrollbar-track {
    background:#eee;
    border: thin solid lightgray;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset;
}
 
::-webkit-scrollbar-thumb {
    background:#999;
    border: thin solid gray;
}

/*----------------------------*/
/* HEADER BLACK TOP WITH LOGO */
/*----------------------------*/

#wrapper-header{
	float:left;
	width:105%;
	height:65px;
	background-color:#026DFA;
	opacity:0;
}

#main-header{
	position:relative;
	width:1200px;
	left:50%;
	margin-left:-600px;
	height:auto;
}

.logo{
	position:absolute;
    margin-top:13.5px;
	left:15px;
}

#stripes{
	background: url(img/stripes.svg) no-repeat;
	position:absolute;
	width:27px;
	height:20px;
	right:15px;
	top:22.5px;
	cursor:pointer;
	display:none;
}

.logo img{height:100%;width:100%;}

/*----------------------------*/
/* SUB WHITE NAV BAR */
/*----------------------------*/

#wrapper-navbar{
	float:left;
	width:100%;
	height:0px;
	background-color:#FFF;
	border-bottom:solid #EDEDED 1px;
	opacity:0;
}

.navbar{
	position:relative;
	width:1200px;
	left:50%;
	margin-left:-600px;
	height:100%;
	top:0;
}

.top-rated,.recent,.oldies{
	float:left;
	text-align:left;
	font-family: 'Roboto',sans-serif;
    font-size: 13px;
	height:40px;
	line-height:40px;
    margin-top:10px;
	cursor:pointer;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	text-transform: uppercase;
	letter-spacing:1.5px;
}

.top-rated{color:#666;margin-left:15px;font-weight:500;}
.recent,.oldies{color: #CCC;margin-left:80px;font-weight:500;margin-left:40px;}

.top-rated:hover,.recent:hover,.oldies:hover{color:#666;opacity:1;}

#fleche-nav-1,#fleche-nav-2,#fleche-nav-3{
	float:left;
	margin-top:26px;
	background: url(img/fleche-nav.svg) no-repeat ;
	width:5px;
	height:10px;
	margin-left:5px;
}

#fleche-nav-2,#fleche-nav-3{opacity:0.5;}

#wrapper-bouton-icon{display:block;}
#bouton-ai,#bouton-psd,#bouton-photo,#bouton-font,#bouton-theme,#bouton-premium{
	float:right;
	width:28px;
	height:28px;
	margin-top:16px;
	margin-right:15px;
	cursor:pointer;
	opacity:1;
	 transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

#bouton-ai:hover,#bouton-psd:hover,#bouton-photo:hover,#bouton-font:hover,#bouton-theme:hover,#bouton-premium:hover{opacity:0.5;transform: scale(1.2);}

#bouton-ai img,#bouton-psd img,#bouton-photo img,#bouton-font img,#bouton-theme img,#bouton-premium img{width:100%;height:100%;}

/*----------------------------*/
/* MAIN DIV */
/*----------------------------*/

#wrapper-container{
	float:left;
	width:100%;
	height:auto;
}

.container,.container-footer {
    position:relative;
    width: 1200px;
    margin-left:-600px;
    left:50%;
}

/*----------------------------*/
/* RESPONSIVE MENU */
/*----------------------------*/

#main-container-menu{
	position:fixed;
    width:100%;
    height:100%;
	background-color:rgba(34, 34, 34, 0.95);
	left:-100%;
	z-index:10000; !important
}

.container-menu{
	position:relative;
	height:100%;
	width:100%;
}

/*----------------------------*/
/* CROSS/CLOSE FOR THE RESPONSIVE MENU */
/*----------------------------*/

#main-cross{
	float:left;
	min-height:53px;
	width:100%;
	margin-bottom:50px;
}

#cross-menu{
	position:absolute;
	width:18px;
	height:18px;
	right:25px;
	margin-top:25px;
	background: url(img/cross-menu.svg) no-repeat;
	cursor:pointer;
}

/*----------------------------*/
/* SMALL LOGO RESPONSIVE MENU */
/*----------------------------*/

#main-small-logo{
	float:left;
	min-height:53px;
	width:100%;
	margin-bottom:25px;
}

.small-logo{
	position:absolute;
	width:131px;
	height:53px;
	left:50%;
	margin-left:-65.5px;
	background: url(img/small-logo.svg) no-repeat;
}

/*----------------------------*/
/* MAIN DIV WITH IMAGE */
/*----------------------------*/

#main-container-image {
    float:left;
    width:100%;
    height:auto;
	background-color:#F4F4F4;
	margin-top:25px;
	opacity:0;
}

.work figure {
    float:left;
	width:calc(100% / 4 - 30px);
    height:auto;
    line-height:auto;
    position: relative;
    padding: 0 !important;
    margin: 15px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
	-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
	background-color:#FFF;
}

.work figure.white dl{
    background: #FFF;
}


.work figure a img {
    height: 90%;
    width: 90%;
	margin-left:5%;
	margin-top:5%;
}

.work figure dl {
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 10px;
    margin: 0;
    line-height: 2.5; 
    color: white;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.work figure:hover dl {
    opacity: 1;
}

.work figure dl dt {
	font-family: Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 13px;
    margin-bottom:0;
	font-weight:600;
	width:80%;
	margin-left:10%;
	color:#666;
	text-align:left;
	height:20px;
	line-height:100%;
	margin-top:40px;

}

.work figure dl dd {
    margin-left: 0;
	font-family: Helvetica, sans-serif;
    font-size: 12px;
	font-weight:400;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	line-height:150%;
	color:#999;
	width:80%;
	margin-left:10%;
	text-align:left;
	
}

#wrapper-part-info{
	position:relative;
	width:100%;
	height:44px;
	background-color:#FFFFFF;
}

#part-info{
	float:left;
	width:calc(100% - 53px);
	text-align:left;
	line-height:44px;
	font-family: Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 12px;
	font-weight:400;
	color:#666;
	margin-left:10px;
	height:44px;
}

.part-info-image{
	float:left;
	margin-left:15px;
	margin-top:8px;
}

.part-info-image img{width:100%;height:100%;}

/*----------------------------*/
/* RESPONSIVE MENU LIST  */
/*----------------------------*/

#main-premium-ressource,#main-themes,#main-psd,#main-ai,#main-font,#main-photo{
	float:left;
	width:100%;
	min-height:36px;
}

.premium-ressource,.themes,.psd,.ai,.font,.photo{
	position:relative;
	text-align:center;
	font-family: Helvetica, sans-serif;
    font-size: 16px;
	font-weight:400;
	height:36px;
	line-height:36px;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.premium-ressource a,.themes a,.psd a,.ai a,.font a,.photo a{
	transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out;
}

.premium-ressource a,.themes a,.psd a,.photo a,.font a,.ai a{color:#999;}

.premium-ressource a:hover{color:#CCC;}
.themes a:hover{color:#66CC7A;}
.psd a:hover{color:#2B9ED8;}
.photo a:hover{color:#56514C;}
.font a:hover{color:#B88DFF;}
.ai a:hover{color:#FF9000;}

/*----------------------------*/
/* UNDERNEATH THE MAIN IMAGE PART    */
/*----------------------------*/

#wrapper-thank{
	float:left;
	width:100%;
	height:190px;
	background-color:#F2F2F2;
	margin-top:40px;
}

#wrapper-oldnew{
	float:left;
	width:100%;
	height:80px;
	background-color:#F4F4F4;
	margin-top:50px;
}

.thank,.oldnew{
	position:relative;
	width:1200px;
	left:50%;
	margin-left:-600px;
	height:100%;
	top:0;
}

.thank-text{
	float:left;
	text-align:center;
	font-family: 'Pacifico', cursive;
    font-size: 70px;
	height:190px;
	line-height:190px;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	color:#B3B3B3;
	font-weight:400;
	width:100%;
}

.wrapper-oldnew-prev,.wrapper-oldnew-next{
	float:left;
	width:50%;
}

#oldnew-prev,#oldnew-next{
	width:43px;
	height:43px;
	opacity:0.5;
	cursor:pointer;
}

#oldnew-next{background: url(img/next.svg) no-repeat;margin-left:25px;float:left;}
#oldnew-prev{background: url(img/prev.svg) no-repeat;margin-right:25px;float:right;}

/*----------------------------*/
/* FOOTER */
/*----------------------------*/

#main-container-footer{
	float:left;
	width:100%;
	height:auto;
	background-color:#F9F9F9;
	border-top:solid #F1F1F1 1px;
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.1);

}

#row-1f,#row-2f,#row-3f,#row-4f{
	float:left;
	width:calc(100% / 4);
	height:auto;
}

.text-row-1f,.text-row-2f,.text-row-3f,.text-row-4f{
	float:left;
	text-align:left;
	height:140%;
	line-height:140%;
	margin-left:20px;
	width:80%;
	text-align:left;
	font-family: Helvetica, sans-serif;
    font-size: 14px;
	font-weight:400;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	color:#A1A1A1;
	margin-top:80px;
}
.text-row-1f,.text-row-2f,.text-row-3f{
	margin-bottom:100px;
}

/*----------------------------*/
/* NEWSLETTER BOX */
/*----------------------------*/

#main_tip_newsletter{
	float:left;
	width:100%;
	height:auto;
	margin-top:20px;
}

#tip_newsletter_input
{
    font: 15px/1.6 Helvetica, sans-serif;
	color: #CCC;
	padding: 5px 5px 5px 46px;
	width: 170px;
	border:solid 2px #CCC;
	border-radius: 5px;
	-moz-appearance: none;
	-webkit-appearance: none;
    box-shadow: none; 
	outline: 0;
	background: url(img/icon-newsletter.svg) no-repeat 10px 9px;
	margin-left:20px;
	vertical-align:center;
	font-weight:400;
}

/*----------------------------*/
/* SEARCH BOX */
/*----------------------------*/

#main_tip_search{
	float:right;
	width:170px;
	margin-top:13px;
	height:auto;
	margin-right:25px;
	display:block;
}

#tip_search_input{
    font: 16px/1.6 Helvetica, sans-serif;
	color: #686868;
	padding: 4px 4px 4px 46px;
	width: 170px;
	border:solid 1px #FFF;
	border-radius: 5px;
	-moz-appearance: none;
	-webkit-appearance: none;
    box-shadow: none; 
	outline: 0;
	margin: 0;
	background: url(img/icon-search.svg) no-repeat 12px 7px;
	vertical-align:center;
	margin-left:-40px;
	background-color:#FFF;
}

#loupe{
	position:absolute;
	background: url(img/loupe.svg) no-repeat;
	width:28px;
	height:30px;
	right:20px;
	top:94px;
	cursor:pointer;
	opacity:1;
}

/*----------------------------*/
/* COPYRIGHT PART */
/*----------------------------*/

#wrapper-copyright{
	float:left;
	width:100%;
	height:70px;
	background-color:#2E2D30;
}

.copyright{
	position:relative;
	width:1200px;
	left:50%;
	margin-left:-600px;
	height:100%;
	top:0;
}

.copy-text{
	float:left;
	text-align:left;
	font-family: Helvetica, sans-serif;
    font-size: 15px;
	height:70px;
	line-height:70px;
	cursor:pointer;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	color:#666;
	margin-left:15px;
	font-weight:500;
}

.wrapper-navbouton{
	position:absolute;
	height:100%;
	right:0;
}

.google,.facebook,.dribbble,.linkin{
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	text-align:right;
	font-family:'socialicoregular';
    font-size: 44px;
	height:70px;
	line-height:70px;
	float:right;
	opacity:0.5;
	cursor:pointer;
	float:right;
	color:#666;
	opacity:1;
}

.dribbble,.facebook,.linkin,.google{padding-right:20px;}
.dribbble,.facebook,.linkin{padding-right:12px;}

.linkin:hover,.google:hover,.facebook:hover,.dribbble:hover{color:#CCC;transform: scale(1.2);}

/*----------------------------*/
/* RWD !important */
/*----------------------------*/

/* Others wide screen -2 */
 
@media only screen and (max-width: 2000px) {
#main-container-menu {
	display:none;
}
}

/* Others wide screen */
 
@media only screen and (max-width: 1200px) {
#main-header,.navbar,.container,.container-footer,.thank,.oldnew,.copyright {
	width:940px;
	margin-left:-465px;
}
#main-container-menu {
	display:none;
}

.work figure {
	width:calc(100% / 3 - 30px);
}
}

/* Small viewports — Old monitors, netbooks, tablets (landscape), etc. */
 
@media only screen and (max-width: 965px) {
#main-header,.navbar,.container,.container-footer,.thank,.oldnew,.copyright {
	width:835px;
	margin-left:-417.5px;
}
#main-container-menu {
	display:none;
}
#row-1f,#row-2f,#row-3f,#row-4f{
	width:100%;
}
.text-row-1f,.text-row-2f,.text-row-3f,.text-row-4f{
	text-align:center;
	width:70%;
	margin-left:15%;
}
.text-row-1f{
	margin-top:75px;
	margin-bottom:35px;
}
.text-row-4f{
	margin-top:0;
	margin-bottom:0;
}
.text-row-2f,.text-row-3f{
	margin-bottom:35px;
	margin-top:0;
}
#tip_newsletter_input{
	position:relative;
	left:50%;
	margin-left:-112.5px;
	margin-bottom:75px;
}
}

/* Smaller viewports — more tablets, old monitors */
 
@media only screen and (max-width: 860px) {
#main-header,.navbar,.container,.container-footer,.thank,.oldnew,.copyright {
	width:715px;
	margin-left:-357.5px;
}
#main-container-menu {
	display:none;
}
}

/* Even smaller viewports — more tablets, etc. */
 
@media only screen and (max-width: 740px) {
#main-header,.navbar,.container,.container-footer,.thank,.oldnew,.copyright {
	width:585px;
	margin-left:-292.5px;
}   
#wrapper-bouton-icon,#main_tip_search{
	display:none;
}
#stripes {
	display:block;
}
#main-container-menu {
	display:block;
}
.work figure {
	width:calc(100% / 2 - 30px);
}
}

/* Mobile phones (Landscape) and Tablets (Portrait) */
 
@media only screen and (max-width: 610px) {
#main-header,.navbar,.container,.container-footer,.thank,.oldnew,.copyright {
	width:455px;
	margin-left:-227.5px;
} 
#wrapper-sorting{
	position:relative;
	width:300px;
	left:50%;
	margin-left:-165px;
}
.top-rated,.recent,.oldies{
	text-align:center;
	font-family: 'Roboto',sans-serif;
    font-size: 13px;
	height:40px;
	line-height:40px;
	margin-left:25px;
}
}

/* Mobile phones (Landscape) and Tablets (Portrait) */
 
@media only screen and (max-width: 480px) {
#main-header,.navbar,.container,.container-footer,.thank,.oldnew,.copyright {
	width:295px;
	margin-left:-147.5px;
}
.work figure {
	width:calc(100% - 30px);
}
.wrapper-navbouton{
	display:none;
}
.copy-text{
	text-align:center;
	width:100%;
}
.thank-text{
    font-size: 50px;
}
}
/* Mobile phones (iphone4/5)*/
 
@media only screen and (max-width: 320px) {

}

/*
 * CSS3 Treeview. No JavaScript
 * @version 1.0
 * @author Martin Ivanov
 * @url developer's website: http://wemakesites.net/
 * @url developer's twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer's blog http://acidmartin.wordpress.com/
 **/
 
/*
 * This solution works with all modern browsers and Internet Explorer 9+. 
 * If you are interested in purchasing a JavaScript enabler for IE8 
 * for the CSS3 Treeview, please, check this link:
 * http://experiments.wemakesites.net/miscellaneous/acidjs-css3-treeview/
 **/
 
.css-treeview ul,
.css-treeview li
{
    padding: 0;
    margin: 0;
    list-style: none;
}
 
.css-treeview input
{
    position: absolute;
    opacity: 0;
}
 
.css-treeview
{
    font: normal 11px "Segoe UI", Arial, Sans-serif;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
 
.css-treeview a
{
    color: #00f;
    text-decoration: none;
}
 
.css-treeview a:hover
{
    text-decoration: underline;
}
 
.css-treeview input + label + ul
{
    margin: 0 0 0 22px;
}
 
.css-treeview input ~ ul
{
    display: none;
}
 
.css-treeview label,
.css-treeview label::before
{
    cursor: pointer;
}
 
.css-treeview input:disabled + label
{
    cursor: default;
    opacity: .6;
}
 
.css-treeview input:checked:not(:disabled) ~ ul
{
    display: block;
}
 
.css-treeview label,
.css-treeview label::before
{
    background: url("./icons.png") no-repeat;
}
 
.css-treeview label,
.css-treeview a,
.css-treeview label::before
{
    display: inline-block;
    height: 16px;
    line-height: 16px;
    vertical-align: middle;
}
 
.css-treeview label
{
    background-position: 18px 0;
}
 
.css-treeview label::before
{
    content: "";
    width: 16px;
    margin: 0 22px 0 0;
    vertical-align: middle;
    background-position: 0 -32px;
}
 
.css-treeview input:checked + label::before
{
    background-position: 0 -16px;
}
 
/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    .css-treeview 
    {
        -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
    }
 
    @-webkit-keyframes webkit-adjacent-element-selector-bugfix 
    {
        from 
        { 
            padding: 0;
        } 
        to 
        { 
            padding: 0;
        }
    }
}