#wrapper {
    width: 100%;
	min-height:100%;
	position:absolute;
}

#content {
    padding-left: 16%;
	padding-bottom:20px; */
    height:100%;
}

.nav {
    width: 16%;
    float:left;
    padding-bottom: 10px;
    min-height:77%;
    max-height: 100%;
}

header {
    color: white;
    background-color: #242323;
    align-content: center;
}

#footer {
	background:#1c2b33;
    color:white;
	width:100%;
	height:20px;
	position:absolute;
	bottom:0;
	left:0;
    clear:both;
    z-index: 3;
}

body{
    background-color: #f7ffff;
    font-family: "ms", sans-serif;
    color: #1c2b33;
    margin:0;
	padding:0;
	height:100%;
}

.section {
    float: left;
    margin-top:10px;
    color: #1c2b33;
    margin-left: 35px;
}

.home{
    float: left;
    max-width:250px;
    position:relative;
    text-align: center;
    margin-left:40px;
    
}

.homedef{
    max-width: 250px;
}


.home img{
    z-index:1;
    float: left;
    width:250px;
}



.homedesc{
    display: block;
    position:absolute;
    z-index:2;
    opacity:0;
    transition: 0.4s;
    font-size: 14px;
    color: #1c2b33;
    max-width:250px;
    text-align: justify;
    height: 250px;
}

.home:hover > .homedesc{
    opacity:1;
    display:block;
    background:rgba(255,255,255,0.9);
}


.about {
    float: left;
    width: 100%;
    position:relative;
    text-align: center;
    margin-left:5px;
    margin-top:10px;
}

.aboutdesc {
    display: block;
    text-align: justify;
    opacity:0;
    transition: 0.4s;
    color: #1c2b33;
    font-size: 11px;
    width:280px;
}

.about:hover > .aboutdesc {
    opacity: 1;    
 }


@media screen and (max-width:680px) {
 
    #content {
    padding-top: 5px;
	padding-bottom:5px;
    height:100%;
    width: 100%;
    }
    
    .section{
        margin: auto;
        width:100%;
        margin-top: 10px;
        padding:none;
        margin:none;
    }
    
     .home{
        width:100%;
         margin:auto;
    }
        
    .home img{
        float:none;
    }
    
    .homedesc{
        position:relative;
        width:100%;
        height:auto;
        opacity:1;
        display:block;
        background:rgba(255,255,255,0.9);
        margin: auto;
    }
    
    .homedef{
        float:none;
        position: relative;
        max-width: 100%;
    }
    .about{
        margin: 0;
        right:15;
        padding: none;
        position: relative;
        float:none;
        padding: none;
        margin:none;
        max-width: 300px;
    }
    
    .aboutdesc{
        padding:none;
        max-width:100%;
        opacity:1;
        display:block;
        margin:auto;
    }

    .about> .aboutdesc {
    opacity: 1;  
}

}


ul.nav li.selected{
    background-color: #005670;
}

ul.nav {
    list-style-type: none;
    margin-top: 0;
    padding: 0;
    background-color: #6cbbd4;
    width:15%;  
    position:absolute;
    margin-bottom: 0;
}

ul.nav li a{
    display:block;
    text-decoration:none;
    padding: 1em;
    transition: 0.3s;
    color:white;  
}


ul.nav li a:hover{
    text-decoration: none;
    background-color: #b6d0d9;
    color: #1f1e1e;
}

.bottomlist {
    bottom: 10px;
    position:absolute;
}


#sign{
    font-size: 12px;
    padding:1em;
}

/*responsive */
ul.nav li.icon{
    display:none;
}

ul.nav li.menu {
    display:none;
}


@media screen and (max-width:680px) {
    .nav{
        height:auto;
        min-height:auto;
        max-height:auto;
        width:100%;
    }
    
    #footer {
        display:none;
    }
    
    .bottomlist{
        display:none;
    }
    
    ul.nav {
    position: relative;
    width:100%;
    border-right:none;
    height:auto;
    display:block;
    }
    ul.nav.responsive {
    position: relative;
    width:100%;
    height:auto;
    } 
    ul.nav li.menu {
        display:block;
        background-color:#005670;
    }
    
    ul.nav li:not(:first-child) {display: none;}
    ul.nav li.icon {
    position: absolute;
    right: 0;
    top: 0;
    float:right;
    display:block;
    }
    ul.nav.responsive {position: relative;}
    ul.nav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
    }
    ul.nav.responsive li {
    float: none;
    display: inline;
    }
    ul.nav.responsive li a {
    display: block;
    text-align: left;
  }
}

/* fade thing */
#cf img {
    height: 20%;
    width: 100%;
    position: absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

  @keyframes cfFadeInOut {
  0% {
  opacity:1;
}
35% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img.top {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}

.client {
    float: left;
    position:relative;
    max-width: 200px;
    text-align: center;
    margin-left: 70px;
    margin-top: 40px;
}

.client img {
    z-index:1;
    float: left;
    width:200px;
}

.clientdesc {
    display: block;
    position:absolute;
    z-index:2;
    opacity:0;
    transition: 0.4s;
    font-size: 10px;
    color: #1c2b33;
    width:100%;
    text-align: justify;
    height:100%;
}

.clientdesc h2{
    text-align: center;
}

.client:hover > .clientdesc {
    opacity:1;
    display:block;
    background:rgba(255,255,255,0.9);
}

@media screen and (max-width:680px) {
    
    .client{
        width: 100%;
         margin:auto;
    }
    
    .client img{
        float:none;
    }

    .clientdesc{
        position:relative;
        width:100%;
        height:auto;
        opacity:1;
        display:block;
        background:rgba(255,255,255,0.9);
        margin: auto;
        font-size:12px;
    }
    
}

.service {
    float: left;
    position:relative;
    max-width: 200px;
    text-align: center;
    margin-top: 20px;
    margin-left:70px;
}

.service img {
    z-index:1;
    float: left;
    width:200px;
}

.servicedesc {
    display: block;
    position:absolute;
    z-index:2;
    opacity:0;
    transition: 0.4s;
    font-size: 10px;
    color: #1c2b33;
    width:100%;
    text-align: justify;  
    height:300px;
}

.servicedesc h2{
    text-align: center;
}

.service:hover > .servicedesc {
    opacity:1;
    display:block;
    background:rgba(255,255,255,0.9);
}

.small{
    font-size: 10px;
}

.smaller{
    font-size: 10px;
}



.service h2{
    z-index: 2;
    bottom: 30;
    position:relative;
    opacity: 1;
    text-align: center;
    font-size: 16px;
    
}

.service:hover > .servicedesc {
    opacity:1;
    display:block;
    background:rgba(255,255,255,0.9);
}

@media screen and (max-width:680px) {
    .service{
        width: 100%;
         margin:auto;
    }
    
    .service img{
        float:none;
    }

    .servicedesc{
        position:relative;
        width:100%;
        height:auto;
        opacity:1;
        display:block;
        background:rgba(255,255,255,0.9);
        margin: auto;
        font-size:12px;
    }
    
    .service h2{
        z-index: 2;
        position: absolute;
        top:0;
        left:15%;
    }
}

.contact {
    float: left;
    position:relative;
    max-width: 250px;
    text-align: center;
    margin-left: 45px;
    margin-top: 50px;
    background-color: white;
}

.contact img {
    z-index:1;
    float: left;
    width:250px;
}

.contactdesc {
    display: block;
    position:absolute;
    z-index:2;
    opacity:0;
    transition: 0.4s;
    font-size: 16px;
    color: #1c2b33;
    width:100%;
    text-align: center;
    height:100%;
}

.contact:hover > .contactdesc {
    opacity:1;
    display:block;
    background:rgba(255,255,255,0.9);
}


@media screen and (max-width:680px) {
    .contact{
        width: 100%;
         margin:auto;
    }
    
    .contact img{
        float:none;
    }

    .contactdesc{
        position:relative;
        width:100%;
        height:auto;
        opacity:1;
        display:block;
        background:rgba(255,255,255,0.9);
        margin: auto;
        font-size:12px;
        z-index: 1;
    }
    
    .notdisplay{
        display:none;
        z-index: 0;
    }
}


#crossf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#crossf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#crossf img.top:hover {
  opacity:0;
}

table {
    border-collapse: collapse;
    width:100%;
    height:100%;
}

table, th, td {
    border: 1px solid #1c2b33;
}

input {
    width: 100%;
}

th,td{
    padding:10px;
    text-align: left;
}

th{
    background-color: #1c2b33;
    color: white;
}

td{
    background-color: #6cbbd4;
    color: white;
}



@media screen and (max-width:680px) {
    #sign{
        display:none;
    }   
}