@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300);
*{
  margin:0;
  padding:0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;

}

p {
    font-size: 14px;
}
body{
background:url(../59.jpg) no-repeat center;
webkit-background-size:cover;

   -moz-background-size:cover;

        background-size:cover;
    transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.site{
background:rgba(255,255,255,.9);
}
div, header, section, h1, h2, h3{
margin:0;
padding:0;
    font-size:18px;
}
.clear{
clear:both;
}
html, body{
margin:0;
padding:0;
}
a{
color:#fff;
text-decoration:none;
}
img{
max-width:100%;
height:auto;
}
.banner img{
min-width:480px;
min-height:200px;
}
.main-header{
background:#FF5252;
color:#fff;
height:77px;
    padding-left: 10px;
}
.main-header h1{
font-size:27px;
text-transform:uppercase;
padding-top:4px;
float:left;
}
.main-header h1 small{
display:block;
font-size:41px;
margin-top:-17px;
font-weight:500;
letter-spacing:3px;
}
.header-inner, .main-content-wrap{
max-width:900px;
margin:auto;
overflow:hidden;
}
#navbtn{
display:none;
}
.main-nav{
float:right;
}
.main-nav a{
display:inline-block;
height:77px;
line-height:77px;
padding-left:10px;
padding-right:10px;
-webkit-transition:all 300ms ease;
   -moz-transition:all 300ms ease;
     -o-transition:all 300ms ease;
        transition:all 300ms ease;
}
.main-nav a:hover{
background:rgba(0,0,0,.1);
}
.banner{
width:100%;
height:400px;
margin:0 auto;
position:relative;
overflow:hidden;
-webkit-transition:all 300ms ease;
   -moz-transition:all 300ms ease;
     -o-transition:all 300ms ease;
        transition:all 300ms ease;
}
.slide{
width:100%;
position:absolute;
-webkit-transition:all 500ms ease-out;
   -moz-transition:all 500ms ease-out;
     -o-transition:all 500ms ease-out;
        transition:all 500ms ease-out;
}
.slide img{
width:100%;
height:auto;
}
.slide .caption{
background:rgba(76,200,204,.7);
color:#fff;
padding:10px;
text-transform:uppercase;
font-size:30px;
line-height:30px;
position:absolute;
top:20%;
left:-100%;
opacity:0;
-webkit-transition:all 700ms ease-out;
   -moz-transition:all 700ms ease-out;
     -o-transition:all 700ms ease-out;
        transition:all 700ms ease-out;
-webkit-transform:scale(0) skew(45deg);
   -moz-transform:scale(0) skew(45deg);
    -ms-transform:scale(0) skew(45deg);
     -o-transform:scale(0) skew(45deg);
        transform:scale(0) skew(45deg);
}
.slideselect1:checked ~ .banner .slide1 .caption1{
left:12%;
opacity:1;
-webkit-transform:scale(1) skew(0);
   -moz-transform:scale(1) skew(0);
    -ms-transform:scale(1) skew(0);
     -o-transform:scale(1) skew(0);
        transform:scale(1) skew(0);
}
.slideselect2:checked ~ .banner .slide2 .caption2{
left:12%;
opacity:1;
-webkit-transform:scale(1) skew(0);
   -moz-transform:scale(1) skew(0);
    -ms-transform:scale(1) skew(0);
     -o-transform:scale(1) skew(0);
        transform:scale(1) skew(0);
}
.slideselect3:checked ~ .banner .slide3 .caption3{
left:12%;
opacity:1;
-webkit-transform:scale(1) skew(0);
   -moz-transform:scale(1) skew(0);
    -ms-transform:scale(1) skew(0);
     -o-transform:scale(1) skew(0);
        transform:scale(1) skew(0);
}
.slide1{
left:0;
-webkit-animation:7s autoslide1 infinite ease-out;
   -moz-animation:7s autoslide1 infinite ease-out;
    -ms-animation:7s autoslide1 infinite ease-out;
     -o-animation:7s autoslide1 infinite ease-out;
        animation:7s autoslide1 infinite ease-out;
}
.slide2{
background:#555;
left:100%;
-webkit-animation:7s autoslide2 infinite ease-out;
   -moz-animation:7s autoslide2 infinite ease-out;
    -ms-animation:7s autoslide2 infinite ease-out;
     -o-animation:7s autoslide2 infinite ease-out;
        animation:7s autoslide2 infinite ease-out;
}
.slide3{
background:#ff77cc;
left:200%;
}
input{
display:none;
}
label{
width:10px;
height:10px;
display:inline-block;
border:1px solid #4cc8cc;
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
position:relative;
cursor:pointer;
}
#slideselected1:before{
content:'';
width:8px;
height:8px;
position:absolute;
top:1px;
left:1px;
background:#4cc8cc;
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
opacity:0;
-webkit-transition:all 200ms ease;
   -moz-transition:all 200ms ease;
     -o-transition:all 200ms ease;
        transition:all 200ms ease;
}
.slideselect1:checked ~ .pointsnav #slideselected1:before{
opacity:1;
}
#slideselected2:before{
content:'';
width:8px;
height:8px;
position:absolute;
top:1px;
left:1px;
background:#4cc8cc;
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
opacity:0;
-webkit-transition:all 200ms ease;
   -moz-transition:all 200ms ease;
     -o-transition:all 200ms ease;
        transition:all 200ms ease;
}
.slideselect2:checked ~ .pointsnav #slideselected2:before{
opacity:1;
}
#slideselected3:before{
content:'';
width:8px;
height:8px;
position:absolute;
top:1px;
left:1px;
background:#4cc8cc;
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
opacity:0;
-webkit-transition:all 200ms ease;
   -moz-transition:all 200ms ease;
     -o-transition:all 200ms ease;
        transition:all 200ms ease;
}
.slideselect3:checked ~ .pointsnav #slideselected3:before{
opacity:1;
}
label{
-moz-user-select:none;
-webkit-user-select:none;
}
.slideselect1:checked ~ .banner .slide1{
left:0;
}
.slideselect1:checked ~ .banner .slide2{
left:100%;
}
.slideselect1:checked ~ .banner .slide3{
left:200%;
}
.slideselect1:checked ~ .banner #slidearrow2-1{
display:none;
}
.slideselect1:checked ~ .banner #slidearrow1{
display:block;
}
/*Slide 2*/

.slideselect2:checked ~ .banner .slide1{
left:-100%;
}
.slideselect2:checked ~ .banner #slidearrow2{
display:none;
}
.slideselect2:checked ~ .banner #slidearrow3{
display:block;
}
.slideselect2:checked ~ .banner #slidearrow2-1{
display:none;
}
.slideselect2:checked ~ .banner #slidearrow1{
display:block;
}
.slideselect2:checked ~ .banner .slide2{
left:0;
}
.slideselect2:checked ~ .banner .slide3{
left:100%;
}
/*Slide 3*/

.slideselect3:checked ~ .banner .slide1{
left:-200%;
}
.slideselect3:checked ~ .banner .slide2{
left:-100%;
}
.slideselect3:checked ~ .banner .slide3{
left:0;
}
.slideselect3:checked ~ .banner #slidearrow1{
display:none;
}
.slideselect3:checked ~ .banner #slidearrow2-1{
display:block;
}
.slideselect3:checked ~ .banner #slidearrow3{
display:none;
}
.slideselect3:checked ~ .banner #slidearrow1-2{
display:block;
}
.main-left{
clear:left;
}
.main-left, .side-bar{
float:left;
box-sizing:border-box;
padding:60px 10px;
}
.main-left{
width:70%;
}
.side-bar{
width:30%;
}
.arrow{
position:absolute;
width:40px;
height:40px;
background:rgba(76,200,204,.4);
-webkit-border-radius:0;
   -moz-border-radius:0;
        border-radius:0;
border:none;
opacity:0;
-webkit-transition:all 300ms ease-out;
   -moz-transition:all 300ms ease-out;
     -o-transition:all 300ms ease-out;
        transition:all 300ms ease-out;
cursor:pointer;
}
.arrow:hover{
background:rgba(76,200,204,1);
}
.banner:hover > .arrow{
opacity:1;
}
.arrow:before{
content:'';
width:1px;
height:25px;
background:rgba(255,255,255,0.7);
position:absolute;
-webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
     -o-transform:rotate(45deg);
        transform:rotate(45deg);
left:15px;
top:-1px;
}
.arrow:after{
content:'';
width:1px;
height:25px;
background:#fff;
position:absolute;
-webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
     -o-transform:rotate(-45deg);
        transform:rotate(-45deg);
left:15px;
top:16px;
}
#slidearrow1, #slidearrow2-1{
top:42%;
left:2px;
}
#slidearrow2{
top:42%;
right:2px;
-webkit-transform:rotate(180deg);
   -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
     -o-transform:rotate(180deg);
        transform:rotate(180deg);
}
#slidearrow3, #slidearrow1-2{
top:42%;
right:2px;
display:none;
-webkit-transform:rotate(180deg);
   -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
     -o-transform:rotate(180deg);
        transform:rotate(180deg);
}
.pointsnav{
width:100px;
margin:auto;
overflow:hidden;
text-align:center;
}
.miniheader{
margin-top:60px;
}
ul.piclist{
list-style:none;
text-align:center;
margin:0;
padding:0;
}
ul.piclist li{
margin:5px;
padding:0;
display:inline-block;
position:relative;
}
ul.piclist li a{
color:#fff;
text-decoration:none;
cursor:pointer;
overflow:hidden;
width:67px;
height:67px;
display:block;
background:#4cc8cc;
}
ul.piclist li:hover{
opacity:0.7;
}
.modallink{
width:67px;
height:67px;
-webkit-border-radius:0;
   -moz-border-radius:0;
        border-radius:0;
border:none;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.modaldeployed{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:999;
background:rgba(0,0,0,.8);
opacity:0;
-webkit-transition:all 300ms ease-in-out;
   -moz-transition:all 300ms ease-in-out;
     -o-transition:all 300ms ease-in-out;
        transition:all 300ms ease-in-out;
visibility:hidden;
}

.modaldeployed .piclist li{
  border: 4px solid #fff;
}

.modalimg{
margin:5% auto;
margin-bottom:10px;
max-width:800px;
background:#fff;
padding:20px;
position:relative;
top:-2000px;
-webkit-transition:all 400ms ease-in-out;
   -moz-transition:all 400ms ease-in-out;
     -o-transition:all 400ms ease-in-out;
        transition:all 400ms ease-in-out;
opacity:0;
-webkit-transform:scale(0);
   -moz-transform:scale(0);
    -ms-transform:scale(0);
     -o-transform:scale(0);
        transform:scale(0);
}
.modalclose{
position:fixed;
top:5%;
right: -60px;
width:40px;
height:40px;
z-index:1000;
background:rgba(76,200,204,.7);
border:none;
-webkit-border-radius:0;
   -moz-border-radius:0;
        border-radius:0;
-moz- transition:all 700ms ease !important;
-webkit-transition:all 700ms ease !important;
   -moz-transition:all 700ms ease !important;
     -o-transition:all 700ms ease !important;
        transition:all 700ms ease !important;
}
.modalclose:hover{
background:#4cc8cc;
}
.modalclose:before{
content:'';
position:absolute;
left:20px;
top:5px;
width:2px;
height:30px;
background:#fff;
-webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
     -o-transform:rotate(45deg);
        transform:rotate(45deg);
}
.modalclose:after{
content:'';
position:absolute;
left:20px;
top:5px;
width:2px;
height:30px;
background:#fff;
-webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
     -o-transform:rotate(-45deg);
        transform:rotate(-45deg);
}
#modalpicclose:checked ~ .modaldeployed{
opacity:0;
visibility:hidden;
}
#modalpicclose:checked ~ .modaldeployed .modalimg{
top:-2000px;
-webkit-transform:scale(0);
   -moz-transform:scale(0);
    -ms-transform:scale(0);
     -o-transform:scale(0);
        transform:scale(0);
}
.modalpic:checked ~ .modaldeployed .modalclose{
right:5%;
left:auto;
}
.modalpic:checked ~ .modaldeployed .modalimg{
opacity:1;
top:0;
-webkit-transform:scale(1);
   -moz-transform:scale(1);
    -ms-transform:scale(1);
     -o-transform:scale(1);
        transform:scale(1);
}
#modalpic1:checked ~ #modaldeployed1{
display:block;
top:0;
left:0;
right:0;
bottom:0;
opacity:1;
visibility:visible;
}
#modalpic2:checked ~ #modaldeployed2{
display:block;
top:0;
left:0;
right:0;
bottom:0;
opacity:1;
visibility:visible;
}
#modalpic3:checked ~ #modaldeployed3{
display:block;
top:0;
left:0;
right:0;
bottom:0;
opacity:1;
visibility:visible;
}
#modalpic4:checked ~ #modaldeployed4{
display:block;
top:0;
left:0;
right:0;
bottom:0;
opacity:1;
visibility:visible;
}
#modalpic5:checked ~ #modaldeployed5{
display:block;
top:0;
left:0;
right:0;
bottom:0;
opacity:1;
visibility:visible;
}
#modalpic6:checked ~ #modaldeployed6{
display:block;
top:0;
left:0;
right:0;
bottom:0;
opacity:1;
visibility:visible;
}
.main-left article{
clear:both;
margin:60px auto;
}
.main-left figure{
width:120px;
height:120px;
background:#4cc8cc;
float:left;
margin-right:10px;
position:relative;
overflow:hidden;
cursor:pointer;
}
.main-left article p{
padding:15px;
}
.main-left figure figcaption{
background:rgba(255,255,255,.1);
line-height:40px;
text-align:center;
position:absolute;
left:0;
right:0;
top:-100%;
bottom:0;
-webkit-transform:scale(2);
   -moz-transform:scale(2);
    -ms-transform:scale(2);
     -o-transform:scale(2);
        transform:scale(2);
-webkit-transition:all 300ms ease;
   -moz-transition:all 300ms ease;
     -o-transition:all 300ms ease;
        transition:all 300ms ease;
}
.main-left figure figcaption:after{
content:'hover me!';
font-size:8px;
position:absolute;
top:170px;
line-height:10px;
left:0;
right:0;
background:#4cc8cc;
color:#fff;
-webkit-transform:scale(1);
   -moz-transform:scale(1);
    -ms-transform:scale(1);
     -o-transform:scale(1);
        transform:scale(1);
}
.main-left figure:hover figcaption{
top:0;
-webkit-transform:scale(1);
   -moz-transform:scale(1);
    -ms-transform:scale(1);
     -o-transform:scale(1);
        transform:scale(1);
background:rgba(255,255,255,.7);
}
.plus{
display:block;
height:40px;
width:40px;
font-size:44px;
line-height:34px;
border:2px solid #4cc8cc;
color:#4cc8cc;
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
margin:32% auto;
}
.plus:hover{
background:rgba(255,255,255,.4);
}
#navbtnclose{
display:none;
}
.main-footer{
position: absolute;
    bottom: 0;
    width: 100%;
background:#FF5252;
height:50px;
}
.main-footer p, .main-footer h3{
text-align:center;
color:#fff;
margin-top:40px;
}
.main-footer h3{
font-size:12px;
}
.site{
}
/*MEDIA QUERIES*/

@media all and (max-width:1024px){
.banner{
    height:300px;
    width: auto;
}
}

@media all and (max-width:800px){
.banner{
    height:240px;
    width: auto;

}
}

@media all and (max-width:600px) {

    .main-header h1 {
        float: none;
        text-align: center;
    }

    .main-left, .side-bar {
        float: none;
        width: 97%;
        margin: auto;
    }

    #navbtn {
        display: block;
    }

    .navbtn {
        clear: both;
        height: 4px;
        width: 30px;
        position: relative;
        top: -40px;
        left: 5px;
        background: #fff;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .navbtn:before {
        content: '';
        display: block;
        clear: both;
        height: 4px;
        width: 30px;
        margin-top: 10px;
        background: #fff;
    }

    .navbtn:after {
        content: '';
        display: block;
        clear: both;
        height: 4px;
        width: 30px;
        margin-top: 5px;
        background: #fff;
    }

    .main-nav {
        float: none;
        clear: both;
        border-top: 1px solid rgba(0, 0, 0, .1);
        position: relative;
        height: 0;
        overflow: hidden;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
    }

    #navdeployer:checked ~ .main-nav {
        height: 300px;
        max-height: auto;
    }

    #navclose:checked ~ .main-nav {
        height: 0;
    }

    #navdeployer:checked ~ #navbtn {
        display: none;
    }

    #navdeployer:checked ~ #navbtnclose {
        display: block;
    }

    #navclose:checked ~ #navbtnclose {
        display: none;
    }

    #navclose:checked ~ #navbtn {
        display: block !important;
    }

    .main-nav a {
        display: block;
        text-align: center;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        padding-left: 0;
        padding-right: 0;
    }

    .banner {
        height: 200px;
        width: auto;
    }

    .main-left figure {
        float: none;
        width: 100%;
        height: 200px;
    }

    .main-left figure figcaption {
        display: none;
    }
}

.span80 {
    width: 80%;
}

.category {
    float: left;
    padding-right: 5px;
    margin-bottom: 15px;
    width: 80px;
}