/*
Theme Name: Arrad 2022
Theme URI: http://www.arradr.com/
Description: A theme for WordPress.
Author: Rick Baker
Author URI: http://www.rickbaker.co
Version: 1.0

Fonts:
    font-family: 'Raleway-Light','GT America Condensed Light', Helvetica, Arial, sans-serif;
	    font-weight: 400;
        
	font-family: 'Raleway-Light','GT America Extended Regular', Helvetica, Arial, sans-serif;;
	    font-weight: 400;
        
	font-family: 'Raleway-Light','GT America Expanded Regular', Helvetica, Arial, sans-serif;;
		font-weight: 400;
		
	font-family: 'Raleway-Light','GT America Expanded Black', Helvetica, Arial, sans-serif;;
        font-weight: 900;

Colors:
    Black: 	#000000;
    White: 	#FFFFFF;
    Red: 	#C0081F;

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

/*
 * Fonts
 */
	@import url('./fonts.css');

/*
 * Globals
 */
    body {
        font-family: 'Raleway-Light','GT America Condensed Light', Helvetica, Arial, sans-serif;
        font-size: 16px;
        color: #FFFFFF;
        background-color: #000000;
        margin: 0;
        padding: 0;
    }
    h1,h2,h3,h4,h5,h6 {
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: normal;
    }
    ::selection {
        color: #000000;
        background: #FFFFFF;
    }
    ::-moz-selection {
        color: #000000;
        background: #FFFFFF;
    }


/*
 * Links
 */
    a {
        color: #FFFFFF;
        text-decoration: none;
        outline: none;
    }
    a:hover {
        color: #FFFFFF;
        text-decoration: none;
    }
    a img {
       border: none;
    }


/*
 * Page Structure
 */
    #container {

    }
    #container > header {

    }
    main {

    }
    #container > footer {

    }


/*
 * Utilities
 */
 	#tagline {
	 	display: none;
 	}
    /* Responsive image containers */
    .fluid-width-image-wrapper img {
        height: auto;
        width: 100%;
    }
    /* Overlay */
    .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
    }

/*
 * Header
 */
     .header {
		position: absolute;
		top: 0;
		height: 116px;
		width: 100%;
	 	z-index: 200;
    }
 	#logo {
	 	position: absolute;
	 	top: 33px;
	 	left: 40px;
 	}
 	.not-mobile #logo:hover .svg path {
	 	fill: #C0081F;
 	}
 	nav {
	 	position: absolute;
	 	top: 43px;
	 	right: 20px;
 	}
 	.close {
	 	position: absolute;
	 	top: 47px;
	 	right: 40px;
        font-family: 'Raleway-Light','GT America Extended Regular', Helvetica, Arial, sans-serif;
	 	font-size: 18px;
	 	text-transform: uppercase;
	 	text-align: right;
 	}
 	.close:hover {
	 	color: #C0081F;
 	}
 	

/*
 * Menus
 */

	.main-menu {
        font-family: 'Raleway-Light','GT America Extended Regular', Helvetica, Arial, sans-serif;
		display: inline-block;
		margin: 0;
		padding: 0;
		text-align: right;
		list-style: none;
		font-size: 18px;
		line-height: 1.8;
		text-transform: uppercase;
	}
	.main-menu > li {
		display: inline-block;
	}
	.main-menu > li > a {
		margin: 0 20px;
		border-bottom: 1px solid rgba(192,8,31,0);
	}
	.not-mobile .main-menu > li > a:hover {
		border-bottom: 1px solid rgba(192,8,31,1);
		color: #C0081F;
	}
 	.main-menu > li.current_page_item > a {
		border-bottom: 1px solid rgba(255,255,255,1);
		color: #FFFFFF;
 	}


/*
 * Home
 */

 	/* Home Slideshow */
	.home-slideshow {
		height: 100vh;
		width: 100%;
		background-color: #000000;
		position: relative;
		z-index: 100;
	}
	.home-slideshow-images {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.home-slide-image {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex !important;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-content: flex-start;
		align-items: center;
	}
	.home-slide-image img,
	.home-slide-image video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.8;
	}
	.home-slideshow .meta {
		margin: 0 40px;
		text-align: center;
		text-transform: uppercase;
		position: relative;
		margin-bottom: 70px;
		line-height: 1;
	}
	.home-slideshow .meta .line-1 {
        font-family: 'GT America Expanded Black', Helvetica, Arial, sans-serif;
		font-size: 44px;
		margin-bottom: 10px;
	}
	.home-slideshow .meta .line-2 {
        font-family: 'GT America Expanded Regular', Helvetica, Arial, sans-serif;
		font-size: 22px;
	}
	.not-mobile .home-slideshow a.meta:hover .line-1,
	.not-mobile .home-slideshow a.meta:hover .line-2 {
		color: #C0081F;
	}
    .home-slideshow .arrow {
	    position: absolute;
	    top: 50%;
	    transform: translate(0, -50%);
	    cursor: pointer;
	    z-index: 200;
	    padding: 10px;
    }
	.home-slideshow .arrow.right {
		right: 40px;
	}
	.not-mobile .home-slideshow .arrow.right:hover {
	    transform: translate(5px, -50%);
	}
	.home-slideshow .arrow.left {
		left: 40px;
	}
	.not-mobile .home-slideshow .arrow.left:hover {
	    transform: translate(-5px, -50%);
	}
    .not-mobile .home-slideshow .arrow:hover path {
	    fill: #C0081F;
    }
	.down-arrow {
		position: absolute;
		left: 50%;
		translate: -50% 0;
		padding: 20px;
		z-index: 100;
		bottom: 10px;
		cursor: pointer;
	}
	.not-mobile .down-arrow:hover path {
	    fill: #C0081F;
	}	
	.bounce {
		-moz-animation: bounce 2s infinite;
		-webkit-animation: bounce 2s infinite;
		animation: bounce 2s infinite;
	}
	
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			transform: translateY(0);
		}
		40% {
			transform: translateY(-10px);
		}
		60% {
			transform: translateY(-10px);
		}
	}

/*
 * Home Grid
 */
 
	.page-home .work-grid {
		padding-top: 80px;
	}
	
/*
 * Bio
 */
 	.bio {
 		margin: 170px auto 40px auto;
 		padding: 0 20px;
 		max-width: 1200px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: stretch;
		align-items: stretch;
 	}
 	.bio > .bio-image {
		width: 50%;
		margin: 0 20px;
		font-size: 0;
 	}
 	.bio-image > img {
	 	width: 100%;
	 	height: auto;
 	}
 	.bio > .entry {
	 	font-size: 18px;
		width: 50%;
		margin: 0 20px;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: stretch;
		align-items: flex-start;
 	}
	.bio h2 {
        font-family: 'Raleway-Light','GT America Expanded Black', Helvetica, Arial, sans-serif;
		font-size: 32px;
		text-transform: uppercase;
	}
	.bio .social {
        font-family: 'Raleway-Light','GT America Expanded Regular', Helvetica, Arial, sans-serif;
		font-size: 16px;
		text-transform: uppercase;
		display: inline-block;
	}
	.bio .social + .social {
		margin-left: 20px;
	}
	.not-mobile .bio > .entry a:hover {
		color: #C0081F;
	}


/*
 * Work Grid
 */
 	.work-grid {
	 	margin: 0 20px;
	 	font-size: 0;
 	}

 	
/*
 * Work Block
 */
 	.work-block {
	 	display: inline-block;
	 	vertical-align: top;
	 	width: calc(50% - 40px);
	 	margin: 0 20px 80px 20px;
 	}
 	.work-block:hover {
	  	color: #C0081F;	
 	}
 	.work-block .image-sizer {
	 	height: 0;
	 	padding-bottom: 56.25%;
 	}
 	.work-block .thumbnails {
	 	position: relative;
	 	overflow: hidden;
 	}
	.work-block img,
	.work-block video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		z-index: 0;
	}
	.not-mobile .work-block:hover img {
		transform: scale(1.03);
	}
	.not-mobile .work-block.has-video:hover img {
		opacity: 0;
		transform: none;
	}
	.work-block .meta {
		margin-top: 15px;
		text-transform: uppercase;
	}
	.work-block .line-1 {
        font-family: 'Raleway-Light','GT America Expanded Black', Helvetica, Arial, sans-serif;
		font-size: 20px;
		display: block;
		line-height: 1.2;
	}
	.work-block .line-2 {
        font-family: 'Raleway-Light','GT America Expanded Regular', Helvetica, Arial, sans-serif;
		font-size: 16px;
		display: block;
		margin-top: 5px;
	}

/*
 * Archive Grid
 */
 	.page-archive {
	 	padding-top: 190px;
 	}
 	.page-archive .work-block {
	 	width: calc(33.33% - 40px);
 	}
	.page-archive .line-1 {
		font-size: 16px;
	}
	.page-archive .line-2 {
		font-size: 14px;
	}


/*
 * Work Detail
 */

  	.page-work-detail {
	 	height: 100vh;
	 	position: relative;
	 	overflow: hidden;
	}
	.page-work-detail .stage {
	    height: 100vh;
        margin: 0;
	    position: relative;
	    text-align: center;

	    display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    justify-content: center;
	    align-content: stretch;
	    align-items: stretch;
	}
	.not-mobile .page-work-detail .stage {
	    height: calc(100vh - 116px);
        margin-top: 116px;
	}
	.page-work-detail .meta {
		width: 100%;
		padding: 30px 15px;
		text-align: center;
		text-transform: uppercase;
		box-sizing: border-box;
	}
	.page-work-detail .meta .line-1 {
        font-family: 'Raleway-Light','GT America Expanded Black', Helvetica, Arial, sans-serif;
		font-size: 20px;
		display: block;
	}
	.page-work-detail .meta .line-2 {
        font-family: 'Raleway-Light','GT America Expanded Regular', Helvetica, Arial, sans-serif;
		font-size: 16px;
		display: block;
		margin-top: 3px;
	}

/*
 * Contact
 */
 
 	.page-contact .entry {
	 	max-width: 960px;
	 	margin: 0 auto;
	 	padding-top: 190px;
		text-align: center;
	 	
	    display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    justify-content: flex-start;
	    align-content: flex-start;
	    align-items: center;
 	}
 	.page-contact .entry .row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-content: flex-start;
		align-items: flex-start;
		margin-bottom: 60px;
 	}
 	.page-contact .entry .col {
	 	margin: 0 70px 20px 70px;
	 	text-align: center;
 	}
 	.page-contact .entry h2 {
        font-family: 'Raleway-Light','GT America Expanded Black', Helvetica, Arial, sans-serif;
		font-size: 20px;
		text-transform: uppercase;
		margin-bottom: 30px;
		flex: 0 1 100%;
 	}
 	.page-contact .entry .social {
 		font-family: 'Raleway-Light','GT America Expanded Regular', Helvetica, Arial, sans-serif;
		text-transform: uppercase;
		font-size: 14px;
		border-bottom: 1px solid #FFFFFF;
 	}
 	.page-contact .entry .social:hover {
		border-bottom: 1px solid #C0081F;	 	
 	}
	.page-contact .entry a.social {
	 	text-decoration: none;
 	}
 	.page-contact .entry h3 {
 		font-family: 'Raleway-Light','GT America Expanded Regular', Helvetica, Arial, sans-serif;
		text-transform: uppercase;
		font-size: 14px;
	}
	.page-contact .entry a {
		text-decoration: underline;
	}
	.not-mobile .page-contact .entry a:hover {
		color: #C0081F;
	}



/*
 * Single (Blog detail)
 */


/*
 * Fallback Page
 */


/*
 * Footer
 */



/*
 * Animations
 */
    /* Color */
    .work-block,
	.home-slideshow .line-1,
	.home-slideshow .line-2,
	.close,
    a {
        transition: color 0.4s;
    }

    /* Opacity */
	.work-block img,
    .browse {
        transition: opacity 0.4s;
    }

    /* Everything */
    .page-contact .entry .social,
	.main-menu > li > a,
    .home-slideshow .arrow,
	.work-block img,
    svg path {
        transition: 0.4s;
    }


/*
 * Wordpress Required
 */
	.alignleft {
	    display: inline;
	    float: left;
	}
	.aligncenter {
	    clear: both;
	    display: block;
	    margin: 0 auto 10px auto;
	}
	.alignright {
	    display: inline;
	    float: right;
	}
	img.alignleft {
	    margin: 0 10px 10px 0;
	}
	img.alignright {
	    margin: 0 0 10px 10px;
	}
	img.aligncenter {
	    margin: 0 auto 10px auto;
	}
	.wp-caption {
	    background: #f1f1f1;
	    color: #888;
	    text-align: center;
	    margin-bottom: 15px;
	    width: auto !important;
	    -moz-border-radius: 0 0 4px 4px;
	    border-radius: 0 0 4px 4px;
	}
	.wp-caption img {
	    margin: 0px;
	}
	.wp-caption p.wp-caption-text {
	    margin: 0 0 5px;
	    padding: 4px;
	    font-style: italic;
	}