/* GLOBAL */

body
{
        border-top:5px solid #650e3d;
        background:#f6d9ce;
		background-image:url(../img/bg-sharks.png);
	    background-repeat:repeat;
        font-family: 'Open Sans', sans-serif;
		color:#FFF;
}

#bg {
		width:100%;
		position:absolute;
		top:0;
		left:0;
    	background-size: 100%;
	    background-repeat: no-repeat;
		min-height:1000px;
}

input, textarea
{
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        padding: 7px;
        outline: 0;
        border:0;
        width:90%;
        background: #EBE8DE;
        border-radius:5px;
}
input[type=radio]
{
        width:auto;
}
input[type=submit]
{
        width:auto;
        padding: 5px 18px;
        line-height:25px;
        text-shadow:none;
        cursor:pointer;
        box-shadow: none;
        background: #650e3d;
        color: #fff;
}

p
{
        margin:5px 0;
        line-height:25px;
}

a
{
        text-decoration:none;
        color:inherit;
        transition: color .5s ease;
}

strong
{
        font-weight:bold;
}

hr
{
        background-color: #D6D0C1;
        border:0;
        height:1px;
        margin:20px 0;
}


/* HEADER */

header
{
        width:auto;
        max-width:900px;
        margin: 0 auto 0px auto;
}
header h1
{
        margin:15px 0 0 0;
        font-size:40px;
        color:#650e3d;
        font-family: 'Open Sans', cursive;
}
header p
{
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        color: #ebe8de;
        margin-left:132px;
}

nav
{ 
		text-align:center;
}
nav ul
{
        list-style:none;
		margin: 0;            
    	padding: 0;            
    	display: inline-block;
    	vertical-align: top; 
}
nav ul li
{
		display: inline-block; 
        float:left;
}
nav ul li a
{
        display:block;
		padding:20px 15px;
        font-family: 'Open Sans', sans-serif;
        text-transform:uppercase;
        transition: all .25s ease;
		color:#650e3d;
}
nav ul li a:hover
{
        color:#fff;
}
nav ul li:hover
{
		background-color:#650e3d;
}

#mobileMenu
{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
}
#mobileMenu ul li
{
        display:block;
        background-color: #650e3d;
        color: #fff;
        padding: 12px 0;
        letter-spacing: 0.1em;
        text-align: center;
        text-transform: uppercase;
        border-bottom: 1px solid #400927;
}
.toggleMobile
{
        display: none;
}

/* LEFT/RIGHT COLUMNS */

#center_column
{
		margin:auto;
        line-height:25px;
        font-family: 'Open Sans', sans-serif;
        width:auto;
		
		max-width:950px;
		padding-bottom:50px;
}

#center_column article.leftcolumn
{
		/*These bits came from online*/
		float: left;
	    width: 50%;
	    min-height: 50px;
	    margin-right: 10px;
		
		height:500px;
}

#center_column article.rightcolumn
{
		/*These bits came from online*/
		overflow: hidden;
	    min-height: 50px;
		
        font-size:14px;
		margin:40px auto;
		padding:15px;
		background-color:rgba(101,14,61,0.7);
        max-width:95%;
}
#center_column article.rightcolumn a
{
        position:relative;
        display:block;
		text-decoration:none;
        transition: all .25s ease;
}

/*IN-PAGE NAV MENU*/
.rightcolumn_menu
{ 
		text-align: left;
}
.rightcolumn_menu ul
{
        list-style:none;
		margin: 5px 0;            
    	padding: 0;            
    	display: inline-block;
    	vertical-align: top;
		width: 100%;
}
.rightcolumn_menu ul li
{
		display: inline-block; 
		padding:0;
        transition: all .25s ease;
		width: 100%;
}
.rightcolumn_menu ul li a
{
        display:block;
		padding-left:10px;
        font-family: 'Open Sans', sans-serif;
		border: 1px solid #CCC;
		background-color:rgba(0,0,0,0.3);
        transition: all .25s ease;
}
.rightcolumn_menu ul li:nth-of-type(n + 2) a
{
		border-top:none;
}
.rightcolumn_menu ul li a:hover
{
        color:#fff;
}	
.rightcolumn_menu ul li:hover
{
		background-color:#650e3d;
}

#center_column h3
{
        font-size:20px;
        border-bottom: 1px solid #D6D0C1;
        padding: 20px 0;
        margin-bottom: 20px;
}
#center_column h4
{
        font-size:16px;
		font-weight:bold;
        padding: 10px 0 0 0;
}
#center_column h5
{
		font-weight:bold;
		text-decoration:underline;
		padding: 10px 0 0 0;
}

.subcolumn
{
		display: inline-block;
		vertical-align: top;
		margin: 15px 1%;
		width: 300px;
		border: 1px solid #EBE8DE;
		background-color:rgba(0,0,0,0.3);
		height:100%;
        transition: all .25s ease;
}
.subcolumn p
{	
		display:block;
		font-size:13px;
		line-height:20px;
}
.subcolumn img
{
		max-width:75px;
		max-height:75px;
		margin-bottom:10px;
}
.subcolumn:hover
{
		background-color:#650e3d;
}


figure img
{
		max-width:100%;
}

figure div
{
		/*Did this to force thumb screen to match image size*/
		margin:auto;
		max-width:450px;
}

#icon25
{
	 	width:25px;
		height:25px;
		vertical-align:middle;
		padding:0 10px;
}

/* BUTTONS */

.button
{
        padding:7px 14px;
        border: 1px solid #c3532e;
        background-image: linear-gradient(bottom, #E56038 0%, #ff8c66 100%);
        background-image: linear-gradient(to bottom, #ff8c66 0%, #E56038 100%);
        background-color: #eb653c;
        color: #EBE8DE;
        text-shadow: 1px 1px 0px #ff8155;
        text-decoration:none;
        border-radius:5px;
        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
}

.button:hover
{
        background:none #EBE8DE;
        border-color: #EBE8DE;
        text-shadow:none;
        color: #4A463B;
}


/* SPACER */

#spacer
{
        width:auto;
        height:auto;
        position:relative;
        font-family: 'Open Sans', sans-serif;
        color:#fff;
        font-size:18px;
		text-align:center;
}
#spacer p
{
        margin-top:22px;
        width:auto;
        position:absolute;
        left:50%;
        margin-left:-450px;
}
#spacer img
{
		max-width:900px;
		width:80%;
}


/* THUMB SCREEN */

.thumb-screen
{
        display:block;
        position:absolute;
        top:0;
        left:0;
		width:100%;
        height:100%;
        background: #000 url(../img/icon-zoom.png) center center no-repeat;
        z-index:99;
        opacity: 0;
        transition: opacity .5s ease;
}

.thumb-screen:hover
{
        opacity:0.5;
}

/* FOOTER */

footer {
        background:#333333;
        min-height:70px;
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        font-family: 'Open Sans', sans-serif;
        color: #ABABAB;
		font-size:12px;
		line-height:25px;
}
footer .footer_left {
		float:left;
		padding: 25px 15px;
}
footer .footer_right {
		float:right;
		padding: 25px 75px 25px 0;
}
footer a {
        transition: opacity .25s ease;
        opacity: 0.3;
		padding: 0 2.5px;
}
footer a:hover
{
        opacity: 0.7;
        color: #fff;
}

/* SKIPLINK */
.go-top
{
		opacity: 1;
        font-family: 'Open Sans', sans-serif;
        position: fixed;
        bottom: 1em;
        right: 1em;
        text-decoration: none;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 12px;
        padding: 1em;
        display: none;
        z-index:99;
}

.go-top:hover
{
        background-color: rgba(0, 0, 0, 0.6);
}


/* MISC */
.clear
{
        clear:both;
}
.hidden
{
        position:absolute;
        clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
          clip: rect(1px, 1px, 1px, 1px);
}

/*RSVP styles */

div.updated,div.error
{
	-khtml-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border-style:solid;
	border-width:1px;
	margin:5px 15px 2px;
	padding:0 .6em;
}


div.updated p,div.error p
{
	margin:.5em 0;
	padding:2px;
}


/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */

@media (max-width: 1215px) 
{ 
        .container .button
        {
                display:none;
        }
}

@media (max-width: 915px)
{ 
		#bg 
		{
				min-height:700px;
		}
        #spacer
        {
                font-size:15px;
        }
        #spacer p
        {
                margin-left:-370px;
        }
		#spacer img
		{
				max-width:80%;
		}
		#center_column article.leftcolumn 
		{
				height:400px;
		}
        input
        {
                padding:4px;
                font-size:14px;
        }
        input[type="submit"]
        {
                padding: 1px 14px;
        }
}

@media (max-width: 765px)
{
		#bg 
		{
				min-height:500px;
		}
        #spacer p
        {
                text-align:center;
                position:static;
                margin: 0 auto;
                padding:15px 0 7px 0;
        }
		#center_column article.leftcolumn 
		{
				height:250px;
				width:100%;
		}
		footer {
				margin:auto;
		}
		footer .footer_left {
				text-align:center;
				float:none;
				padding: 5px 15px 0 5px;
				margin:auto;
		}
		footer .footer_right {
				text-align:center;
				float:none;
				padding: 5px 15px;
				margin:auto;
		}
}

@media (max-width: 550px)
{
        header
        {
            	margin-top: 5px;
            	text-align: center;
        }        
        #spacer
        {
                height:auto;
                padding-bottom:15px;
        }
		#spacer img
		{
				height:46px;
				width:auto;
		}
        #mobileMenu
        {
                display: block;
                z-index: 99;
        }
        .toggleMobile
        {
                position: fixed;
                top: 10px;
                left: 10px;
                display: block;
                width: 40px;
                height: 36px;
                cursor: pointer;
                z-index: 999;
        }
        .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
        {
                display: block;
                position: absolute;
                width: 40px;
                height: 8px;
                left: 0;
                background: #d4a3bd;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile span.menu1
        {
                top: 0;
        }
        .toggleMobile span.menu2
        {
                top: 14px;
        }
        .toggleMobile span.menu3
        {
                top: 28px;
        }
        .toggleMobile.active span.menu1
        {
                top: 14px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu2
        {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu3
        {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        header nav
        {
                display:none;
        }
        header h1
        {
                font-size:40px;
        }
        header p
        {
                margin-left: 60px;
                font-size:14px;
        }
		.go-top
		{
				top: 1em;
				right: 1em;
				bottom: auto;
		}
}

/* KEYFRAMES */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}