/* CSS Document */
html{
height:100%;
width:100%;
background-color:#242424;
}
body{
margin:0px auto;
height:100%;
width:100%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#wrapper{
min-width:900px;
background-color:#242424;
}
#wrapper > section{
height:100%;
clear:both;
}
#footer{
width:100%;
height:100px !important;
float:left;
}
.inner_footer{
color:#969191;
padding:41px;
}
#banner{
overflow: hidden;
max-height: 700px;
z-index:1;
opacity:.5;
}
#banner > img{
opacity:.5;
}
#logo{
position: absolute;
top: 0;
opacity: 1;
min-width: 900px;
left: 50%;
margin-left: -450px;
margin-top: 125px;
}
#logo > img{
width:900px;
}
#nav_box{
width:100%;
background: #333;
position:fixed;
z-index:99;
top: 0;
left: 0;
}
#navigation{
height: 47px;
min-width: 900px;
text-align: center;
line-height: 44px;
list-style-type:none;
margin:0px;
padding:0px;
-webkit-transition: .5s ease;
transition: .5s ease;
}
a{
color:#fff;
}
li a{
float:left;
padding: 0px 50px;
color: #CCC;
font-size: 10px;
height:47px;
letter-spacing: 2px;
text-transform: uppercase;
border-right:1px solid rgba(153, 153, 153, 0.28);
-webkit-transition:.5s ease;
transition:.5s ease;
-ms-transition:.5s ease;
}
li a:hover{
background-color:#ff9900 !important;
color:#333 !important;
cursor:pointer;
}
li:nth-child(5 ) a{
border:none;
}
li:nth-child(1) a{
border:none;
background-color:#E1E1E1;
color:#333;
padding-right: 200px;
}
li a{
text-decoration:none;
}
#home{
min-width:900px;
height:300px !important;
}
#home_page{
color:#E6E6E6;
padding:100px 0px;
}
#home_boxes{
width:900px;
overflow:hidden;
margin:0px auto;
}
#home_boxes > div{
width:295px;
height:295px;
background:#CCC;
float:left;
margin-right:1px;
-webkit-transition: .5s ease;
transition:.5s ease;
-ms-transition:.5s ease;
}
#home_boxes > div:hover{
background:#ff9900;
}
#about{
color:#ecf0f1;
}
#about article{
}
.float_boxes{
float:left;
width:900px;
position: relative;
height:360px;
}
.clear_box{
padding: 0 60px;
overflow:hidden;
}
.no_padding{
overflow:hidden;
height: 100%;
}
.no_padding img{
}
.col-1-2{
width:50%;
}
.col-1{
width:100%;
}
.col-1-4{
width:25%;
}
.center_it{
text-align:center;
}
.title{
color:#999999;
height:auto !important;
background-color:#222222;
}
.white-title{
color:#333;
height:auto !important;
background-color:#eee;
}
h1{
font-size: 32px;
}
p{
line-height: 20px;
font-size:100%;
}
.inner{
margin:80px;
margin: 60px auto;
padding: 0 100px;
max-width: 560px;
}
#contact{
background-color: #eeee;
color: #333;
}
.dark{
background-color:#333;
}
.black{
background-color:#111111;
color:#eeeeee;
}
.grey{
background-color:#2E2E2E;
color:#eeeeee;
}
.medium_grey{
background-color:#666666;
color:#eeeeee;
}
.light_grey{
background-color:#eeeeee;
color:#333 !important;
}
.light_grey a{
color:#333;
}
.orange{
background-color: #ff9900;
color:#333;
}
.orange a{
color:#333;
}
.img-box{
float:left;
overflow:hidden;
position:relative;
}
.images{
-webkit-transition: 1s ease;
transition: 1s ease;
}
.images > img{}
.images:hover > img{
opacity:.5;
}
.images:hover > .img-txt{
height:50px;
}
.img-txt{
position: absolute;
bottom: 0;
height: 0px;
background: #ff9900;
width: 100%;
padding: 0px 30px;
color: #333;
line-height: 48px;
-webkit-transition: .5s ease;
transition: .5s ease;
}
.img-col-1{
width:100%;
}
.img-col-1-2{
width:50%;
}
.img-col-1-4{
width:25%;
}
.img-box{
float:left;
width:
}
.img-size1{
height:360px;
}
.img-size2{
height:720px;
}
.img-size3{
width:auto;
height:360px;
}
.social{
display: block;
width: 40px;
height: 40px;
text-indent: -9999em;
overflow: hidden;
background-image:url(../images/sprite.png);
background-repeat: no-repeat;
background-color:#666;
-webkit-transition: .5s ease;
transition: .5s ease;
}
.facebook:hover{
background-color: #3b5998 !important;
border-color: #3b5998 !important;
}
.facebook{
background-position: 15px 9px;
}
nav a#pull {
display: none;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
@media
only screen and (max-width: 920px){
.col-1-2{
width: 100% !important;
height:auto;
}
.col-1-4{
width:50% !important;
}
.inner{
padding:0px 50px;
}
.images{
height:250px;
}
.img-col-1-2{
width:100%;
}
.img-col-1-2 > .img-col-1-2{
width:25%;
}
.img-col-1-4{
width:50%;
}
#nav_box {
border-bottom: 0;
}
#navigation{
height:0px;
overflow:hidden;
}
#nav_box a#pull {
display: block;
width: 100%;
position: relative;
height:50px;
}
#nav_box a#pull:after {
content:"";
background: url('../images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
#nav_box a {
color: #fff;
text-decoration: none;
line-height: 40px;
}
li:nth-child(1) a{
border:none;
background-color:#E1E1E1;
color:#333;
padding-right:20px;
}
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
}
/* iPads (portrait and landscape) ----------- */
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.col-1-2{
width: 100% !important;
height:auto;
}
.col-1-4{
width:50% !important;
}
.inner{
padding:0px 50px;
}
.img-col-1-2{
width:25%;
}
.img-col-1-4{
width:25%;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.col-1-2{
width: 100% !important;
height:auto;
}
.col-1-4{
width:50% !important;
}
.inner{
padding:0px 50px;
}
.img-col-1-2{
width:25%;
}
.img-col-1-4{
width:25%;
}
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.col-1-2{
width: 100% !important;
height:auto;
}
.col-1-4{
width:50% !important;
}
.inner{
padding:0px 50px;
}
.img-col-1-2{
width:100%;
}
.img-col-1-4{
width:50%;
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}