﻿/* #Resets
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}




.container {
margin: auto;
width: 100%;
z-index:1200;
border: 0px solid #000;
}

.ul-reset {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
z-index: 1200;
}



/* #Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {
font-size: 0;
position: relative;
z-index: 1200;
}
nav > ul > li {
display: inline-block;
font-size: 14px;
padding: 0 15px;
position: relative;
}
nav > ul > li:first-child {padding-left: 0;}
nav > ul > li:last-child {padding-right: 0;}
nav > ul > li > a {
color: #fff;
display: block;
position: relative;
border-bottom: 0px solid transparent;
}


nav > ul > li > a:hover{
color: #fff;
}


/* #Mega Menu Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mega-menu {
background: #000;
display: none;
left: 0;
position: absolute;
text-align: left;
width: 100%;
border: 1px solid #08F;
}

.mega-menu h3 {
color: #FFF;
font-size: 2.1em;
font-weight:lighter;
border: 0px solid #000;
background-color:transparent;
}

.mega-menu h3 a{
color: #fff;
}

.mega-menu ul {
float: left;
padding: 16px;
width: 33%;
}
.mega-menu ul:last-child {margin-right: 0;}

.mega-menu a {
border-bottom: 1px solid #ddd;
display: block;

}
.mega-menu a:hover {color: #F80;}

.mega-menu ul li img{
width: 100%;
}

.mega-menu ul img{
width: 100%;
}

.mega-menu .logo{
position:relative;
width:100%;
height: 48px;
left:0px;
top:0px;
background-color:#fff;
}

.mega-menu .logo img{
height:48px;
float:right;

}

/* #Droppable Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.droppable {
position: static;

}
.droppable > a:after {
content: "\f107";
font-size: 12px;
padding-left: 6px;
position: relative;
top: -1px;

}
.droppable:hover .mega-menu {display: block;}



/* #Browser Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {clear: both;}

.ocitem{
position:relative;
width:100%;
height:180px;
display:block;
overflow :hidden;
text-align:center;
margin:0 0 12 0;
}

.ocitem .image{
position:absolute;
top:40px;
width:100%;
height:180px;
}

.ocitem .image img{
position:absolute;
left:0px;
top:-70px;
width:100%;
border: 0px solid; 
}


.ocitem .title{
position:absolute;
top:140px;
width:100%;
line-height: 40px;
font-size:1.2em;
text-shadow:0px 0px 4px #888;
}

.ocitem .title a{
display:block;
background-color:#000;
filter: Alpha(opacity=50);-moz-opacity:5;opacity:0.5;
color:#FFF;
text-decoration: none;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.ocitem .title a:hover{
background-color:#F80;
filter: Alpha(opacity=90);-moz-opacity:9;opacity:0.9;
color:#FFF;
text-shadow:0px 0px 4px #800;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}


.ocitem2{
position:relative;
width:100%;
margin:0 0 4 0;
text-align:center;

}

.ocitem2 .title{
width:100%;
line-height: 40px;
font-size:1.2em;
text-shadow:0px 0px 4px #888;
}

.ocitem2 .title a{
display:block;
background-color:#222;
color:#FFF;
text-decoration: none;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
border: 0px solid transparent;
}

.ocitem2 .title a:hover{
background-color:#F80;
filter: Alpha(opacity=90);-moz-opacity:9;opacity:0.9;
color:#FFF;
text-shadow:0px 0px 4px #800;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.mega-menu ul .button{
position:relative;
width: 48%;
margin-right:1%;
padding:0px;
left:0.8%;
line-height: 40px;
font-size:1.2em;
text-shadow:0px 0px 4px #888;
display:inline-block;
text-align: center; 

}

.mega-menu ul .button a{
display:block;
background-color:#222;
color:#FFF;
text-decoration: none;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
border: 0px solid transparent;
}

.mega-menu ul .button a:hover{
background-color:#F80;
filter: Alpha(opacity=90);-moz-opacity:9;opacity:0.9;
color:#FFF;
text-shadow:0px 0px 4px #800;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}