/*
Theme Name: About Men
Author: Another Conceptt
Author URI: http://www.anotherconcept.nl
Version: 1.0
Date: 2017803

-------------------------------------------------------------- */
/* Reset
-------------------------------------------------------------- */

/* Custom CSS */

/* Hide */

/* Algemeen */

body{
	background:#fff;
}

.fullWidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

/* Fonts */
h1,h2,h3,h4,h5,h6{
	font-family: 'Titillium Web', sans-serif;
	font-weight:400;
	color:#333;
}

h1{
	font-size:2em;
}
h2{
	font-size:1.8em;
}
h3{
	font-size:1.6em;
}
h4{
	font-size:1.4em;
}

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

p,li{
	font-family:'Open Sans';
	font-weight:400;
	font-size: 11pt;
    line-height: 23pt;
}

a:visited,
a{
	color:#6b7a88;
	transition:all ease 0.2s;
}
	a:hover,
	a:focus{
		color:#808080;
	}

.button,
input.button,
.woocommerce input.button{
	font-family: 'Titillium Web', sans-serif;
	font-size: 1em;
	font-weight:200;
    padding: 7px 32px;
	background:#6b7a88;
	transition:all ease 0.2s;
	color:#fff!important;
	box-shadow:0px 3px 0px #5a6d7f;
	border-radius:1px;
	text-shadow:1px 1px 0px rgba(0,0,0,0.5);
}	
	.button:hover,
	input.button:hover,
	.woocommerce input.button:hover{
		background:#5a6d7f;
	}

.linkList,
#sidebars ul{
	list-style:none;
	margin:0 0 5px 0;
}
	.linkList li,
	#sidebars ul li{
		font-weight: 100;
		margin-bottom: 8px;
		padding-bottom: 8px;
		border-bottom: 1px solid rgba(255,255,255,0.2);
		width: 100%;
	}
	
#sidebars .sub-menu{
	display:none!important;
}

/* Header */

header#header{
	background:rgba(17,17,17,0.8);
	position:relative;
	z-index:5;
	
}
	header.home{
		height:100vh;
/* 		background:url(http://localhost/dev1/wp-content/uploads/2016/11/bruiloft-website-05.jpg); */
		background:none !important;
		background-size:cover;
		position:relative;

	}
	
	.page-banner,
	.page-banner img{
		 margin-top: -113px;
		 width:100vw;
	}
	
	.mc-image,
	#maximage img {
		background-size:cover;
	}
	
	.logo{
		margin:26px 0;
	}
	
	header.home .header-title{
		font-size:4.976em;
		padding-top:40%;
	}
		header.home .nav-wrap{
			top:0;
			position:fixed;
		}
		
	header .fbicon{
		position:absolute;
		top:18px;
		right:25px;
		background:rgba(59,89,152,0.4);
		color:#fff;
		border-radius:50%;
		padding:6px 14px;
		transition:all ease 0.2s;
	}	
		header .fbicon:hover{
			background:rgba(59,89,152,0.8);
		}

	.header-quote{
		background:#111;
		text-align:center;
	}
		.header-quote p{
			color:#fff;
			font-family:'Roboto';
			font-weight: 200;
   			text-transform: uppercase;
   			font-size:12pt;
			letter-spacing:4px;
			margin:10px 0;
		}

/* Header info */
.info-wrap{
	padding: 22px 0;
}
	.info-wrap li{
		padding-bottom:0;
	}
.header-info,
.header-info h4{
	color:#fff;
	text-align:right;
	
}

.header-info h4{
	display: inline-block;
	padding-left: 42px;
	font-size: 1.3em;
}

.header-info p{
	margin-top:-10px;
	margin-bottom:0;
	padding-left: 42px;
	display: inline-block;
	font-size:10pt;
	line-height:19pt;
}
.info-inner{
	position:relative;
}
	.info-inner:before{
		font-family: FontAwesome;
	   	content: "\f1d9";
	   	color:#6b7a88;
	   	font-size:3em;
	   	position:absolute;
	   	left: -7px;
	   	top:30%;
	}
	
	#bel.info-inner:before{
		content: "\f095";
		left: 68px;
	}
	
	#open.info-inner:before{
		content: "\f017";
		left: 10px;
	}


nav{
	text-align:right;
	padding: 20px 0;
	position:relative;
}

nav ul{
	margin:0;
}

nav ul li{
	list-style:none;
	display:inline;
	margin-right:26px;
	font-family:'Roboto';
	font-weight:300;
	text-transform:lowercase;
	font-size:11pt;
	line-height: 19pt;
	padding:21px 0 30px 0;
	position:relative;
}
	nav ul li:last-child{
		margin-right:0;
	}

	nav ul li a,
	nav ul li a:visited,
	nav ul li a:hover{
		color:#fff;
	}
		nav ul li:hover,
		nav ul li.current_page_item:hover{
			border-top:3px solid #6b7a88;
			transition:all ease 0.2s;
		}
		
		nav ul li.current_page_item{
			border-top:3px solid #6b7a88;
		}
		nav ul li > ul.sub-menu{
			display:none;
			position: absolute;
		    top: 63px;
		    z-index: 99;
		    white-space: nowrap;
		    text-align: left;
		    left: -20px;
		}	

			nav ul li:hover > ul.sub-menu{
				display:block;
			}

			.sub-menu li{
				display:block;
				background:rgba(250,250,250,0.9);
				padding:4px 8px;
				border-top:solid 3px #ccc;
			}
				.sub-menu li a{
					color:#333;
					text-shadow:none;
				}
					.sub-menu li a:hover{
						color:#111;
					}

			.sub-menu li{
				position:relative;
			}
				.sub-menu li ul.sub-menu{
				    position: absolute;
				    top: 0;
				    left: 122px;
				}


			.sub-menu .sub-menu,
			.sub-menu .sub-menu .sub-menu{
				display:none;
				transition:all ease 0.2s;
			}	

/* Phone */
.phone{
	position:absolute;
	right: 18px;
	bottom: 66px;
	font-family:'Open Sans';
	color:#808080;
	font-size:9.5pt;
	font-weight:600;
}
	.phone .fa{
		color:#36a1b5;
		margin-right:5px;
	}
	
	.phone .fa-envelope-o{
		margin-left:10px;
	}
	
	.phone a{
		color:#808080;
	}
		.phone a:hover{
			color:#898989;
		}

/* Mobile nav */
.mobileBar{
	background:#111;
	padding:8px;
}

	.mobileBar a,
	.mobileBar .left-off-canvas-toggle{
		color:#fff;
		text-align:right;
		font-family: 'Titillium Web', sans-serif;
		font-size:18px;
		background:transparent;
		padding:0;
		margin:0;
	}
	
	.mobileBar .fa-navicon{
		margin-right:5px;
	}

.left-off-canvas-menu h4{
	color:#6b7a88;
	padding:10px;
	font-size:22px;
}	

.left-off-canvas-menu ul{
	margin:0;
}

	.left-off-canvas-menu ul li{
		padding:10px;
		font-family:'Roboto';
		font-weight:300;
		text-transform:uppercase;
		border-bottom:1px solid rgba(255,255,255,0.6);
		list-style:none;
	}
		.left-off-canvas-menu ul li a{
			color:#fff;
		}

/* Slider */
.orbit-container ul li img {
	width: -webkit-fill-available;
}

/* Home */
.fullWidth .columns{
	padding:0;
}

.intro{
	height:100vh;
}

.home-content{
	padding:35px 60px;
	background:#fff;
	text-align:center;
}

.image-column{
	position:relative;
	overflow:hidden;
	background-size:cover!important;
}
	.image-column img{
		height:100%
	}

.home-about{
	background:linear-gradient(to right, rgba(17,17,17,1), rgba(17,17,17,0.1)),url(https://www.about-men.nl/wp-content/themes/aboutmen2017/img/bg.jpg);
	background-position:center;
	background-size: cover;
	padding: 45px 0;
}

	.home-about h2,
	.home-about p{
		color:#fff;
	}


blockquote{
	display:block;
	font-family:'Open Sans';
	font-style:italic;
	font-weight:700;
	font-size:20px;
	border-left:3px solid #003f7c;
	padding-left:14px;
	margin-bottom:8px;
}

.content{
	margin-top:20px;
	margin-bottom:20px;
}

/* Blocks */
.blocks{
	padding:0px 0 50px 0;
}
	.block{
		color:#333;
	}
	.block img{
		height: auto;
		overflow: hidden;
		width: 100%;
	}

.cta-sidebar,
.block-inside{
	padding:15px;
	border:#ccc 1px solid;
	background:#fff;
	position:relative;
	margin-bottom:15px;
	color:#333;
}

	.cta-sidebar p{
		color:#333;
	}
	.cta-sidebar ul,
	.block-inside ul{
		list-style-type: square;
		margin-left: 1.1rem;
	}
		.cta-sidebar li,
		.block-inside li{
			font-size:9pt;
		}

.block-inside{
	padding:40px 15px 15px 15px;
	position:relative;
}		
	.block-inside .fa{
		background: #36a1b5;
	    border-radius: 100%;
	    font-size: 2.5em;
	    color: #fff;
	    padding: 13px 12px;
	    border:#fff solid 6px;
	    position:absolute;
	    top: -38px;
    	right: 21px;
	}
	
	.block-inside .fa.fa-shield{
		padding:10px 15px;
	}

.cta-sidebar:before{
	content:"";
	width: 0;
	height: 0;
	border-bottom: 40px solid #36a1b5;
	border-left: 40px solid transparent;
	position:absolute;
	right:0;
	bottom:0;
	transition:all ease 0.2s;
}
	.cta-sidebar:hover:before{
		border-bottom: 45px solid #36a1b5;
		border-left: 45px solid transparent;
	}
	.cta-sidebar h2,
	.block-inside h2{
		position:relative;
		font-size: 1.15em;
		padding: 2px 0;
	}
	.cta-sidebar h2:before,
	.block-inside h2:before{
		content:"";
		background:#36a1b5;
		height:100%;
		width:4px;
		position: absolute;
    	left: -15px;
	}
	
.perfect-quotes{
	font-family:'Lora', sans-serif;
	font-style:italic;
	font-size:1.2em;
	color:#fff;
	text-shadow:1px 1px 0px rgba(0,0,0,0.4);
	text-align:center;
	background:none!important;
	margin:18px;
}	

.quote{
	margin-bottom:35px;
}

/* News page */

.news-title a{
	color:#333;
}
	.news-title a:hover{
		color:#222;
	}

.message{
	border-bottom: 1px solid rgba(0,0,0,0.3);
	border-width:80%;
    padding: 10px 0;
}	

.next-page{
	float:left;
}

.past-page{
	float:right;
}

/* News Detail */
.news-image{
	margin-bottom:10px;
}

.news-image img{
	width:100%;
}

/* Footer */

footer{
	background:#292929;
	padding:0;
}

.logos{
	padding:30px 0;
	background:#2c2c2c;
}
	footer.home{
		padding:0;
	}

	footer p,
	footer li{
		color:#fff;
	}
	
	
	footer a{
		color:#6b7a88;
	}
		footer a:hover{
			color:#5a6d7f;
		}

	footer h3{
		color:#fff;
		font-size:18pt;
		margin-top:35px;
	}
		footer h3:after{
			height:3px;
			background:#6c6b68;
			content:"";
			display:block;
			width:60%;
			margin:10px 0 20px 0;
		}
		

		.social-icon{
			border-radius:50%;
			padding:10px;
			font-size:20px;
			background:#003f7c;
			color:#fff;
			margin-right:10px;
			transition:all ease 0.2s;
		}
		
		.social-icon:hover{
			border-radius:3px;
		}
			.social-icon.fa-facebook{
				padding:10px 14px;
			}
		
.bottomBar{
	background:rgba(0,0,0,0.15);
	padding:15px;
	z-index:999;
}			

.bottomBar p{
	margin:0;
	opacity:0.7;
	font-size:8.5pt;
}
	.bottomBar .left p{
		text-align:left;
	}
	
	.bottomBar .right p{
		text-align:right;
	}

	/* Small screens */
@media only screen {
/* 	.logo{ */
/* 		display:block; */
/* 		margin-left:auto; */
/* 		margin-right:auto; */
/* 	}	 */

/* 	header.home .header-title{ */
/* 		font-size:3.6em; */
/* 	} */
	
/* 	.bottomBar .right p{ */
/* 		text-align:left; */
/* 	} */

} /* Define mobile styles */

@media only screen and (max-width: 40em) {
	.logo{
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	
	header.home .header-title{
		font-size:3.6em;
	}
	
	.bottomBar .right p{
		text-align:left;
	}
	
	header .fbicon,
	header .fbicon:hover{
		background:none;
		top:4px;
		right: 2px;
    	left: auto;
	}
	
	.home-content{
		padding:35px 20px;
	}
	
	.mc-image,
	#maximage img,
	#headerhome{
		margin-top:0;
	}
	
	header.home{
		height:auto;
	}
	
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens */
@media only screen and (min-width: 40.063em) {
	
	
} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	header#header{
		background: rgba(17,17,17,1);
	}
	
	.logo{
		display:block;
		max-width:340px;
		margin:18px auto 14px auto;
	}
	
	nav{
		padding:9px 0;
	}
		nav ul li{
			padding:12px 0 11px 0;
			margin-right:20px;
			font-size:10pt;

		}
	
	.mc-image,
	#maximage img,
	#headerhome{
		margin-top:0;
	}
	
	header.home{
		height:auto;
	}
	
	header .fbicon{
		top: 5px;
   	 	left: 25px;
   	 	right: auto;
	}
	
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens */
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens */
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */


#wpadminbar {
    direction: ltr;
    color: #ccc;
    font: 400 13px/32px "Open Sans",sans-serif;
    height: 32px;
    position: absolute;
    top: -32px;
    left: 0;
    width: 100%;
    min-width: 600px;
    z-index: 99999;
    background: rgba(0,0,0,0.4);
}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
        white-space: nowrap;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}