html, body {
	height: 100%;
}
body {
	margin: 0px;
	padding: 0px;
	background: #fff;
	font-family: 'Raleway', sans-serif;
	font-size: 12pt;
	font-weight: 400;
	color: #0b182b;
}


h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-style: normal;
    color: #C3C44E;
    font-size: xx-large;
    font-weight: 600;
}

p, ol, ul {
	margin-top: 0px;
}

p {
    line-height: 190%;
    font-style: normal;
    color: #09172a;
}

strong {
    color: #c3c44e;
    font-weight: 600;
    font-size: 80pt;
    font-family: "URW Form Cond";
    text-align: center;
}

a {
	color: #09172a;
}

a:hover {
    text-decoration: none;
    font-size: 12pt;
}

a img {
	border: none;
}

	.image
	{
		display: inline-block;
	}
	
		.image img
		{
			display: block;
			width: 100%;
		}

	.image-full
	{
		display: block;
		width: 100%;
		margin: 0 0 2em 0;
	}
	
	.image-left
	{
		float: left;
		margin: 0 2em 2em 0;
	}
	
	.image-centered
	{
		display: auto;
		margin: 0 0 2em 0;
	}

		.image-centered img
		{
    margin: 0;
    width: auto;
    background-color: #FFFFFF;
    color: #fff;
		}

hr {
	display: none;
}


/*********************************************************************************/
/* List Styles                                                                   */
/*********************************************************************************/

	ul.style1
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	ul.style1 li
	{
		border-top: solid 1px #0b182b;
		padding: 0.80em 0;
	}
	
	ul.style1 li:first-child
	{
    border-top: 0;
    padding-top: 0;
    color: #000000;
	}

	ul.style2
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	ul.style2 li
	{
		border-top: solid 1px #E5E5E5;
		padding: 0.80em 0;
	}
	
	ul.style2 li:first-child
	{
		border-top: 0;
		padding-top: 0;
	}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #c3c44e;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #fff;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #0b182a;
    padding: 20px;
}
/*********************************************************************************/
/* Social Icon Styles                                                            */
/*********************************************************************************/

	ul.contact
	{
		margin: 0;
		padding: 1.5em 0em 2.5em 0em;
		list-style: none;
	}
	
	ul.contact li
	{
		display: inline-block;
		padding: 0em 0.30em;
		font-size: 1em;
	}
	
	ul.contact li span
	{
		display: none;
		margin: 0;
		padding: 0;
	}
	
	ul.contact li a
	{
		color: #FFF;
	}
	
	ul.contact li a:before
	{
		display: inline-block;
		background: #3f3f3f;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #FFFFFF;
	}
	
	ul.contact li a.icon-twitter:before { background: #2DAAE4; }
	ul.contact li a.icon-facebook:before { background: #39599F; }
	ul.contact li a.icon-dribbble:before { background: #C4376B;	}
	ul.contact li a.icon-tumblr:before { background: #31516A; }
	ul.contact li a.icon-rss:before { background: #F2600B; }


/*********************************************************************************/
/* Heading Titles                                                                */
/*********************************************************************************/

	.title
	{
		margin-bottom: 2em;
		text-transform: uppercase;
	}

	.title h2
	{
    font-weight: 400;
    color: #c3c44c;
    font-size: 2em;
	}
	
	.title .byline
	{
		letter-spacing: 0.15em;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 0.90em;
		color: #0b182b;
	}

/** WRAPPER */

#wrapper {
	background: #0b182b url("images/oxuscreativelogowhite.png") no-repeat;
}

#footer-wrapper
{
	background: #0b182b;
}

.container {
	width: 1200px;
	margin: 10px auto;
}

.clearfix {
	clear: both;
}


/*********************************************************************************/
/* Wrappers                                                                      */
/*********************************************************************************/

#header-wrapper
{
    overflow: 100%;
    background-size: 100%;
    padding: 1em 0em 1em 0em;
    background: #c3c44c;
    color: #09172A;
}


/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header 
	{
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: #FFFFFF;
    visibility: visible;
	}

/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/

	#logo 
	{
		width: 500px;
		height: 100px;
		margin: 0 auto;
		padding: 2em 0em;
		text-transform: uppercase;
	}
	
	#logo h1
	{
		letter-spacing: 0.10em;
		font-size: 3em;
	}
	
	#logo p 
	{
		letter-spacing: 0.10em;
		color: #FFF;
	}
	
	#logo a 
	{
		text-decoration: none;
		color: #FFF;
	}

/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

	#banner 
	{
    overflow: hidden;
    height: 500px;
    background: url("images/oxuscreativebackground.jpg") no-repeat center;
    background-size: cover;
    font-family: "URW Form Cond";
    color: #c3c44e;
    font-size: xx-large;
	}
	
	#banner .image
	{
	}
	

/** MENU */

#menu-wrapper
{
	background: #0b182a;
}

#menu {
	overflow: hidden;
	height: 100px;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	display: inline-block;
}

#menu a {
	display: block;
	letter-spacing: 1px;
	padding: 0px 40px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.80em;
	line-height: 100px;
	border: none;
	color: #FFF;
}

#menu a:hover, #menu .current_page_item a {
    text-decoration: none;
    font-size: 0.8em;
    font-style: normal;
}

#menu .current_page_item a {
    background: #c3c44e;
    font-size: .08;
    font-style: normal;
}

/** PAGE */

#section
{
    position: relative;
    overflow: hidden;
    padding: 6em 0em 6em 0em;
    background-color: #09172a;
}

/** CONTENT */

#content
{
	float: right;
	width: 790px;
}

/*********************************************************************************/
/* Sidebar                                                                       */
/*********************************************************************************/

	#sidebar
	{
		float: right;
		width: 345px;
	}
	
	#sidebar .title h2
	{
		font-size: 1.6em;
	}
	
	#sidebar .box1
	{
		margin-bottom: 3em;
	}


/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

	#copyright
	{
		overflow: hidden;
		padding: 5em 0em;
		text-align: center;
	}
	
	#copyright p
	{
    letter-spacing: 0.20em;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.80em;
    color: #fff;
	}
	
	#copyright a
	{
		text-decoration: none;
		color: rgba(255,255,255,.7);
	}

/*********************************************************************************/
/* Welcome                                                                       */
/*********************************************************************************/

	#welcome
	{
		overflow: hidden;
		padding: 5em 0em;
		border-bottom: 1px solid #09172a;
		text-align: center;
	}
	
	#welcome h2
	{
		letter-spacing: 0.20em;
		text-transform: lowercase;
		font-size: 2.6em;
	}
	
	#welcome p
	{
		font-size: 1.3em;
	}

	#welcome .byline
	{
		display: block;
		padding: 0em 0em 1.5em 0em;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 1.2em;
		color: #0b182b;
	}

/*********************************************************************************/
/* Portfolio                                                                     */
/*********************************************************************************/

	#portfolio-wrapper
	{
		background: rgba(0,0,0,.04);
		padding: 6em 0em;
		color: rgba(255,255,255,.7);
	}
	
	#portfolio
	{
		overflow: hidden;
	}
	
	#portfolio .title h2
	{
		font-size: 1.2em;
		color: #c3c44a;
	}

	#portfolio .byline
	{
		font-size: 1em;
		color: #c3c44a;
	}
	
	#column1,
	#column2,
	#column3,
	#column4
	{
		width: 282px;
	}
	
	#column1,
	#column2
	{
		float: left;
		margin-right: 24px;
	}
	
	#column3
	{
		float: left;
	}
	
	#column4
	{
		float: right;
	}
	
/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/

	.button
	{
		display: inline-block;
		margin-top: 1.5em;
		padding: 1.50em 3em 1.50em 3em;
		background: #c3c44a;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 500;
		font-size: 1em;
		color: #FFF;
	}
	
		.button:before
		{
			display: inline-block;
			width: 40px;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
			color: #FFF;
		}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
	
	#footer-wrapper
	{
    overflow: hidden;
    padding: 5em 0em;
    background: #fff;
    font-size: 12pt;
    font-style: normal;
	}

	#footer
	{
    color: #09172a;
	}
	
	#footer .title h2
	{
		font-weight: 400;
		font-size: 2em;
		color: #c3c44a;
	}

	#footer .title
	{
		border-color: none !important;
	}
	
	#footer .style1 li
	{
		border-color: #c3c44c !important;
	}
	
	#footer .style1 a
	{
		font-size:1em;
		color: #0b182b;
	}
	
	#box1
	{
    float: left;
    width: 354px;
    margin-right: 24px;
    padding-right: 30px;
    text-align: center;
    color: #ffff;
	}
	
	#box2
	{
    float: left;
    width: 354px;
    margin-left: 24px;
    padding-right: 30px;
    color: #FFFFFF;
	}
	
	#box3
	{
		float: right;
		width: 344px;
		padding-left: 40px;
	}


	#wrapper #page #content .title p {
    font-family: URW Form Cond;
}
.header {
    color: #c3c34a;
}
.paragraph2 {
}



@mixin aspect-ratio($width, $height) {
  position: relative;
    
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
    
  > img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
  }
}


section {
    background: #FFFFFF;
    padding: 50px 0;
}

.container {
    margin: 0 auto;
    padding: 0 20px;
    height: auto;
}

.carousel {
    display: block;
    text-align: left;
    position: relative;
    margin-bottom: 22px;
    
    > input {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        
		&:nth-of-type(22):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -2100%; }
		&:nth-of-type(21):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -2000%; }
		&:nth-of-type(20):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1900%; }
		&:nth-of-type(19):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1800%; }
		&:nth-of-type(18):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1700%; }
		&:nth-of-type(17):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1600%; }
		&:nth-of-type(16):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1500%; }
		&:nth-of-type(15):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1400%; }
		&:nth-of-type(14):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1300%; }
		&:nth-of-type(13):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1200%; }
		&:nth-of-type(12):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1100%; }
		&:nth-of-type(11):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1000%; }
		&:nth-of-type(10):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -900%; }
		&:nth-of-type(9):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -800%; }
		&:nth-of-type(8):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -700%; }
		&:nth-of-type(7):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -600%; }
        &:nth-of-type(6):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -500%; }
        &:nth-of-type(5):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -400%; }
        &:nth-of-type(4):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -300%; }
        &:nth-of-type(3):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -200%; }
        &:nth-of-type(2):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -100%; }
        &:nth-of-type(1):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: 0%; }
        
        &:nth-of-type(1):checked ~ .carousel__thumbnails li:nth-of-type(1) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
        &:nth-of-type(2):checked ~ .carousel__thumbnails li:nth-of-type(2) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
        &:nth-of-type(3):checked ~ .carousel__thumbnails li:nth-of-type(3) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
        &:nth-of-type(4):checked ~ .carousel__thumbnails li:nth-of-type(4) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
        &:nth-of-type(5):checked ~ .carousel__thumbnails li:nth-of-type(5) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
        &:nth-of-type(6):checked ~ .carousel__thumbnails li:nth-of-type(6) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(7):checked ~ .carousel__thumbnails li:nth-of-type(7) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(8):checked ~ .carousel__thumbnails li:nth-of-type(8) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
	    &:nth-of-type(9):checked ~ .carousel__thumbnails li:nth-of-type(9) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
	    &:nth-of-type(10):checked ~ .carousel__thumbnails li:nth-of-type(10) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(11):checked ~ .carousel__thumbnails li:nth-of-type(11) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(12):checked ~ .carousel__thumbnails li:nth-of-type(12) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(13):checked ~ .carousel__thumbnails li:nth-of-type(13) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(14):checked ~ .carousel__thumbnails li:nth-of-type(14) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(15):checked ~ .carousel__thumbnails li:nth-of-type(15) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(16):checked ~ .carousel__thumbnails li:nth-of-type(16) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
	    &:nth-of-type(17):checked ~ .carousel__thumbnails li:nth-of-type(17) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(18):checked ~ .carousel__thumbnails li:nth-of-type(18) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(19):checked ~ .carousel__thumbnails li:nth-of-type(19) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(20):checked ~ .carousel__thumbnails li:nth-of-type(20) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(21):checked ~ .carousel__thumbnails li:nth-of-type(21) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
		&:nth-of-type(22):checked ~ .carousel__thumbnails li:nth-of-type(22) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
;     color: #FFFFFF;
    color: #FFFFFF;
    height: 100%;
    }
	
}

.carousel__slides {
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    display: flex;
}

.carousel__slide {
    position: relative;
    display: block;
    flex: 1 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 300ms ease-out;
    vertical-align: top;
    box-sizing: border-box;
    white-space: normal;
    
    figure {
        display: flex;
        margin: 0;
    background-color: #FFFFFF;
    }
    
    div {
        @include aspect-ratio(3, 2);
    width: 50%;
    }
    
    img {
        display: block;
        flex: 1 1 auto;
        object-fit: cover;
    }
    
    figcaption {
    align-self: flex-end;
    padding: 20px 20px 0 20px;
    flex: 0 0 auto;
    width: 25%;
    min-width: 150px;
    font-weight: normal;
    }
    
    .credit {
        margin-top: 1rem;
        color: rgba(0, 0, 0, 0.5);
        display: block;        
    }
    
    &.scrollable {
        overflow-y: scroll;
    }
}

.carousel__thumbnails {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    
    margin: 0 -10px;
    
    .carousel__slides + & {
        margin-top: 20px;
    }
    
    li {        
        flex: 1 1 auto;
        max-width: calc((100% / 22) - 20px);  
        margin: 0 10px;
        transition: all 300ms ease-in-out;
    }
    
    label {
        display: block;
        @include aspect-ratio(1,1);
        
                  
        &:hover,
        &:focus {
            cursor: pointer;
            
            img {
                box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
                transition: all 300ms ease-in-out;
            }
        }
    }
    
    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}