/*
	Theme Name: Workality Lite Child
	Theme URI: http://northeme.com/themes/workality-lite
	Template: Workality-Lite-master
	Text Domain:  workality-lite-child
	Description: Clean&Responsive Wordpress Theme
	Author: Northeme.com
	Author URI: http://northeme.com
	Version: 1.3.3
	Tags: Portfolio, Work, Clean, Slick, Minimal, Art, Easy to Customize, Custom, Modern, Creative, Design, Personal, Advertising, Agency, Responsive
	
	All files are released under the GNU General Public License version 3.0 
	(http://www.gnu.org/licenses/gpl-3.0.html)

*/

@font-face {
    font-family: Massacre;
    src: local('Massacre'),
    url("fonts/Massacre.ttf") format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Helv-Children;
    src: local('Helv-Children'),
    url("fonts/Helv Children.otf") format('opentype');
    font-weight: normal;
}

html, body { height: 100%; }

body {
    background: #9a0900 url(./img/bg-tile.jpg) repeat-x left top;
    color: #fff;
}
.container { background: url(./img/bg-body.jpg) no-repeat left top;  }

a.main-logo { font-family: Massacre; letter-spacing: 0; font-size: 75px; line-height: 75px; text-shadow: 0 3px 15px #000000; color: #B30A00; }
a.main-logo:hover { text-shadow: 3px 3px 20px #000000; color:#FF0E00;  }

ul.main-nav { text-shadow: none; margin: 0; }
ul.main-nav li a { color: #fff; text-transform: uppercase; padding: 0; }

h1, h2, h3, h4, h5, h6 { color: #fff; text-shadow: 0 1px 5px #000; }

a { color: #FFB800; display: inline-block; }
a:hover, a:focus { color: #fff; }
a.tags {
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    background: #0f0f0f;
}
a.tags:hover { background: #282828; }
.widget { font-size: 100%; }
.wp-caption, blockquote, .widget li, .widget, .navigation-bottom a, table#wp-calendar, .border-color, .widget_tag_cloud div a {
    border-color: #282828!important;
}

.page-template-template-standard-php .fitvids .ten {
    background-color: rgba(0, 0, 0, 0.3); padding: 20px; width: 540px;
    -webkit-border-radius: 7px 7px 7px 7px;
    border-radius: 7px 7px 7px 7px;
}

blockquote {
    border-left: 2px solid #ff0000 !important; margin-left: 0; background: #000;
}

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    background: #252525;
    background: #252525 -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.1) 100%);
    background: #252525 -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(100%,rgba(0,0,0,.1)));
    background: #252525 -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%);
    background: #252525 -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.1) 100%);
    background: #252525 -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.1) 100%);
    background: #252525 linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.1) 100%);
    border: 1px solid #545454;
    border-top: 1px solid #000000;
    border-left: 1px solid #1A1A1A;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    text-shadow: 0 1px rgba(0, 0, 0, 0.75);
    color: #fff;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    color: #222;
    background: #ff0d00;
    background: #ff0d00 -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(0,0,0,.2) 100%);
    background: #ff0d00 -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2)));
    background: #ff0d00 -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
    background: #ff0d00 -o-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
    background: #ff0d00 -ms-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
    background: #ff0d00 linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
    border: 1px solid #d20a00;
    border-top: 1px solid #ff766f;
    border-left: 1px solid #ff766f;
    text-shadow: 0 1px rgba(154, 0, 0, .75);
    color: #fff;
}

ul.main-nav .current_page_item a, ul.main-nav .current_menu_item a, ul.main-nav li:hover a {
    border-bottom: 0;
    color: #B30A00;

}

.wp-caption, blockquote, .widget li, .widget, table#wp-calendar, .border-color, .widget_tag_cloud div a {
    border-color: #810000!important;
}

.navibg h3 {
    color: #fff;
    text-shadow: 0 0 11px #000;
    font-size: 50px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 6px;
}
.navibg.withall {
    width: 620px;
    float: right;
    /*overflow: hidden;*/
}
.navibg.withall div.navigate a {
    background-color: #B30A00;
    color: #3C1310;
    border-radius: 4px 4px 4px 4px;
}
/* responsive submenu ------------------------------------------------*/
.mobilemenu {
    background: #000 url(./img/mobilemenu-bg.png) no-repeat right top;
}
div.mobilemenu ul.mob-nav a:hover {
    background-color: #B30A00;
    color: #fff;
}

.widget .textwidget,
.widget{
	padding:0;
}

.widget p:last-child {
    margin: 0;
}

footer { margin-top: 0; }
footer .columns {
    background: url(./img/ernie-footer.png) no-repeat right top;
    height: 170px;
}

/* Homepage */
.home #gallery-1 img { border: 0; }
.home .panel-grid-cell .panel { padding-bottom: 0; }
.kijkwijzer img { margin-right: 0; }

/*Banners ------------------------------------------------------*/
.cta-banner {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
}
.cta-banner img {
    -webkit-transition: all 0.4s ease-in-out 0.5s;
    -moz-transition: all 0.4s ease-in-out 0.5s;
    -o-transition: all 0.4s ease-in-out 0.5s;
    -ms-transition: all 0.4s ease-in-out 0.5s;
    transition: all 0.4s ease-in-out 0.5s;
    display: block;
    position: relative;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    width: 100%;
}
.cta-banner:hover img {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
}

.kijkwijzer img {
    background: black;
    border-radius: 1000px;
    padding: 3px 0px;
    width: 55px;
    margin-right: 3px;
}

.cta-banner .mask {
    background-color: rgba(255, 23, 0, 0.5);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.3s ease-in 0.4s;
    -moz-transition: all 0.3s ease-in 0.4s;
    -o-transition: all 0.3s ease-in 0.4s;
    -ms-transition: all 0.3s ease-in 0.4s;
    transition: all 0.3s ease-in 0.4s;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}

span.loop-tags{
	display:none;
}

.cta-banner:hover .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}
.cta-banner h2 {
    font-family: Helv-Children;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background: transparent;
    margin: 0;
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -o-transform: scale(10);
    -ms-transform: scale(10);
    transform: scale(10);
    -webkit-transition: all 0.3s ease-in-out 0.1s;
    -moz-transition: all 0.3s ease-in-out 0.1s;
    -o-transition: all 0.3s ease-in-out 0.1s;
    -ms-transition: all 0.3s ease-in-out 0.1s;
    transition: all 0.3s ease-in-out 0.1s;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 0 5px;
    font-weight: normal;
}
.cta-banner:hover h2 {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.cta-banner p { margin:0; }
.cta-banner a.info {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -o-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 0.3s ease-in-out 0.1s;
    -moz-transition: all 0.3s ease-in-out 0.1s;
    -o-transition: all 0.3s ease-in-out 0.1s;
    -ms-transition: all 0.3s ease-in-out 0.1s;
    transition: all 0.3s ease-in-out 0.1s;
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    font-size: 14px;
    font-weight: bold;
    margin-top: 125px;
}
.cta-banner:hover a.info {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.cta-banner:hover a.info:hover {
    background: #FF0E00;
}

ul li.current-menu-item a{
	color:#B30A00;
}

/* Blog page */
.blogpage .one-third { margin-top: 340px; }
.widget_recent_entries li, .widget_kpg_cpl li { background: url(./img/sidebar-post.png) no-repeat left center; }
.widget_categories li { background: url(./img/sidebar-categories.png) 0 6px no-repeat; }
div.blogpost h3 { font-family: 'Oswald', sans-serif; text-shadow: none; text-transform: uppercase; }
div.blogpost {
    border-bottom: 2px solid;
    float: left;
    width: 96%;
    margin: 0px 0 25px 0;
    padding: 2%;
    background: rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 7px 7px 7px 7px;
    border-radius: 7px 7px 7px 7px;
}
.blogpost-thumbnail { float: left; margin: auto; width: 96%; padding: 2%; margin-bottom: 15px; margin-top: -30px; }
.blogpost-thumbnail a { text-align: center; display: block; }
.blogpost-thumbnail a img {
    -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.5);
    box-shadow: 0 0 20px 0 rgba(0,0,0,.5);
}
.post:nth-child(odd) .blogpost-thumbnail a img {
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
.post:nth-child(even) .blogpost-thumbnail a img {
    -ms-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
}
div.blogpost .bottom { float: left; clear: both; margin: 0;  }
div.blogpost .bottom a.tags { margin-bottom: 0;  }
div.blogpage .readmore {
    border-radius: 4px 4px 4px 4px;
    background: #000;
    padding: 10px;
    float: left;
    margin-bottom: 10px;
}
div.blogpage .readmore:hover {
    background: #B30A00;
}
.loop-tags {
    clear: both;
    float: left;
    background: none;
}
.loop-tags a.tags {
    background: none;
}
div.blogpost .bottom a.tags:first-child { margin-left: 0; }
.navigation-bottom { clear: both; }
.navigation-bottom a {
    border-radius: 4px 4px 4px 4px;
    background: #0f0f0f;
    border: 1px solid;
}

/* Post single */
a.navigate { background: url(./img/arrows.png) no-repeat; }
.container .twelve.columns.omega { width: 600px; }

div.commentform input[type=text], div.commentform textarea {
    width: calc(100% - 28px) !important;
}

p.comment-form-cookies-consent,
p.comment-form-url {
    display: none;
}

.interviewer, .kermit, .piggy { font-weight: bold; color: #C36666; text-transform: uppercase; }

/* Banner homepage */
.banner {
    width: 150px;
    height: 150px;
    background: url(./img/barbyisbadbanner.png) no-repeat center bottom;
    background-size: 150px;
    display: block;
    margin: 0 auto;
    margin-top: 430px;
}

/* responsive ---------------*/

@media only screen and (max-width: 959px){
    .kijkwijzer img{
        width:40px;
    }
    
    .banner {
        float: left;
        margin-top: 160px;
        position: absolute;
        margin-left: 100px;
        width: 125px;
        height: 125px;
        background-size: 125px;
    }
	
    .cta-banner .mask{
        opacity:1;
		background:unset;
    }
	
	footer .columns {
    	background: url(./img/ernie-footer.png) no-repeat center bottom;
    	height: 110px;
	}
	
	.cta-banner a.info {
    	margin: 0;
    	opacity: 1;
	}
	
	.cta-banner a.info{
		transform:unset !important;
	}
	
	.cta-banner p {
    	position: absolute;
    	bottom: 20px;
    	left: 0;
    	right: 0;
	}
	
	.cta-banner:hover a.info{
		transform:unset !important;
	}

    .cta-banner h2 {
        opacity: 1 !important;
		font-size: 22px;
        transform: unset !important;
        margin: 20px;
        color: white;
        display: block;
    }
	
	footer .columns {
    	margin: 0 !important;
	}
}


@media only screen and (max-width: 780px){
	.noresponsive{
		display:none !important;	
	}
	
	footer .columns {
    	margin: 0 !important;
	}
	
	.single-post .one-third.column,
	.archive .one-third.column {
    	display: none !important;
	}
	
	.single-post .two-thirds.column,
	.archive .two-thirds.column {
    	width: calc(100% - 20px) !important;
	}
}

/* Tablet */
@media only screen and (max-width: 959px) and (min-width: 768px) {
    .bg-tile {  background: none; }
    .container { background: url(./img/bg-body.jpg) no-repeat left -185px; }
    body { background: #9a0900 url(./img/bg-tile.jpg) repeat-x left -185px; }

    /* TRICKY!! Check in projects!!! */
    #pg-117-0 .panel-grid-cell#pgc-117-0-0 {
        padding-left: 230px;
        width: 75%;
    }
    #pg-117-0 .panel-grid-cell#pgc-117-0-1 {
        float: right;
        width: 25%;
    }
    /* END TRICKY!!! */

    .container .twelve.columns.omega { width: 475px; }

    a.main-logo {
        font-size: 60px;
    }
    .navibg.withall {
        width: 492px;
        float: right;
    }

    .blogpage .one-third {
        margin-top: 210px;
    }
    .container .sixteen.columns {
        width: auto;
    }
    body.home .row.fitvids {
        margin-top: 30px;
    }
    body.home .fitvids .ten {
        width: 90%;
    }
    .container footer .sixteen.columns {
        width: 100%;
    }
}
@media only screen and (max-width: 767px){
	.single-post .two-thirds.column, .archive .two-thirds.column {
    	width: calc(100% - 0px) !important;
	}
	
	footer .columns {
    	background: url(./img/ernie-footer.png) no-repeat left bottom;
	}
	
	.respbutton {
    	width: calc(100% - 20px);
    	margin: 0px 10px -20px 10px;
	}
	
	.banner {
    	position: absolute;
    	bottom: 15px;
    	right: 45px;
    	top: unset;
    	z-index: 20;
    	left: unset;
	}
	.container .twelve.columns.omega{
		width:100%;
	}
	
	a.navigate.back {
    	background-position: -40px 0;
    	height: 40px;
	}
	
	a.navigate.next {
    	background-position: -80px 0;
    	height: 40px;
		width: 30px;
    	margin-right: 20px;
	}
	
	a.navigate.back:hover {
    	background-position: -40px -50px;
	}
	
	a.navigate.next:hover {
    	background-position: -80px -50px;
	}
}
@media only screen and (max-width: 575px){
	.respbuttonsrow {
    	display: block !important;
	}
	
	.respbutton {
    	margin-bottom: 0px;
	}
	
	footer .columns{
		height:210px;
		background: url(./img/ernie-footer.png) no-repeat center bottom;
	}
	
	.banner {
    	bottom: 115px;
	}
}


/* Smartphone */
@media only screen and (max-width: 767px) and (min-width: 500px ){
    body #pg-117-2 .panel-grid-cell#pgc-117-2-1 {
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .container { width: 90%; padding: 0 5%; }
    .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns,
    .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns,
    .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns,
    .container .one-third.column, .container .two-thirds.column, .navibg.withall {
        width: 100%;
    }

    .panel-grid-cell .panel {
        zoom: 1.5;
    }
    .page-template-template-standard-php .fitvids .ten {
        padding: 5%;
        width: 90%;
    }
    .bg-tile {
        background: none;
    }
    a.main-logo {
        font-size: 11vw;
        text-align: center;
        width: 100%;
    }

    /*Menu button ----------*/
    a.navbarbutton.button {
        color: #222;
        background: #B30A00;
        background: #B30A00 -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(0,0,0,.2) 100%);
        background: #B30A00 -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2)));
        background: #B30A00 -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
        background: #B30A00 -o-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
        background: #B30A00 -ms-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
        background: #B30A00 linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
        border: 1px solid #d20a00;
        border-top: 1px solid #ff766f;
        border-left: 1px solid #ff766f;
        text-shadow: 0 1px rgba(154, 0, 0, .75);
        color: #fff;

        -webkit-transition: background 0.3s linear;
        -moz-transition: background 0.3s linear;
        -ms-transition: background 0.3s linear;
        -o-transition: background 0.3s linear;
        transition: background 0.3s linear;
    }
    a.navbarbutton.button:hover {
        color: #222;
        background: #FD0D00;
        background: #FD0D00 -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(0,0,0,.2) 100%);
        background: #FD0D00 -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2)));
        background: #FD0D00 -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
        background: #FD0D00 -o-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
        background: #FD0D00 -ms-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
        background: #FD0D00 linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.2) 100%);
        border: 1px solid #d20a00;
        border-top: 1px solid #ff766f;
        border-left: 1px solid #ff766f;
        text-shadow: 0 1px rgba(154, 0, 0, .75);
        color: #fff;
    }

    #pgc-117-0-1 .widget_siteorigin-panels-image { display: none; }

    .container .blogpage .one-third { margin-top: 0; width: 50%; float: right; }
    .widget_search input[type=text] {
        width: 66%;
        display: inline-block;
        padding: 2%;
    }
    .widget_search input[type="submit"] {
        width: 26%;
        display: inline-block;
        padding: 2%;
    }
}

@media only screen and (max-width: 480px) {
    .widget_recent_entries, .widget_categories { display: none; }
    .container .blogpage .one-third { margin-top: 140px; width: 100%; float: left; }
}