html, body{
    height: 100%;
    width: 100%;
    min-width:800px;
    margin: 0;
    font-family:'Futura','Helvetica', sans-serif;
    font-weight: 900;
    font-size: 10px;
    background-color: #e8eaea;
    overflow: auto
}

h1{font-size: 16px}

h2, h4{
    font-family: 'Garamond', 'Times', serif; 
    font-weight: 100; 
    font-size: 14px; 
    z-index: 98
}

h3{font-size: 14px}
h4{line-height: 22px}

#wrap{
    width: 840px;
    margin: 0 auto;
    margin-top: 125px;
}

#content{width: 400px; float: left; padding-left: 10px; padding-right: 10px}

#content img {width: 100%; transition: .8s ease; opacity: 0.5}

#content .text {
    position:fixed;
    text-align: center;
    width: 250px;
    height: 50px;
    font-size: 50px;
    top:50%;
    left:50%;
    margin-left: -125px;
    margin-top: -25px;
    opacity: 0;
    transition: .8s ease;
    z-index: 99;
    text-decoration: underline
}

#content:hover .text {opacity: 1}
#content img:hover {opacity: 1}


#content .slider-img img, #content .slider-draw img{opacity: 1}

a{text-decoration: none; color: black}

h1 a:hover{
    border-bottom: 5px solid black;
    cursor: pointer
}

a:visited{color: black}

#contact{
    position: fixed;
    text-align: center;
    width: 250px;
    height: 50px;
    top:40%;
    left:50%;
    margin-left: -125px;
    margin-top: -25px;
}

#contact a:hover{text-decoration: underline}
#contact img {width: 20px; margin: 30px}

#textclient{width: 450px;margin: 0 auto; line-height: 20px}


/* ---------------- slider ----------------- */

.slider-img, .slider-draw{width:100%}

.slider-draw p{
    width: 100%;
    font-family: "Garamond", "Times", "serif";
    text-align: right;
    font-weight: 100;
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 50px;
    margin-top: 0px
}

.slider-draw {margin: 0 auto}


/* ---------------- frame ----------------- */

#frame_t, #frame_b, #frame_l, #frame_r, #circle, #frame_rt{
    position: fixed;
    display: block;
    z-index: 99
}


#frame_t{
    top: 5px;
    width: 250px;
    left: 50%;
    margin-left: -125px;
    text-align: center;    
}

#frame_rt{
    top: 5px;
    right: 0;   
}

#frame_rt img {width: 20px; margin-right: 35px; margin-top: 15px}

#frame_b{
    bottom: 5px;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    text-align: center
}

#frame_l{
    left: 0;
    top: 50%;
    text-align: left;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    white-space:nowrap;
}

#frame_r{
    right: 0;
    top: 50%;
    text-align: left
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform:rotate(270deg);
    transform: rotate(270deg);
    white-space:nowrap;
}


/* ________________ selection _________________ */


/*** Works on common browsers ***/
::selection {
    background-color: #fff;
    color: #000;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: #fff;
    color: #000;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: #fff;
    color: #000;
}

::-ms-selection {
    background-color: #fff;
    color: #000;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: #fff;
    color: #000;
}


/* ---------------- device ----------------- */

@media only screen and (max-width: 1000px) {
  
    #wrap{
    width: 850px;
    margin: 0 auto;
    margin-top: 125px;
    }

    #content{width: 700px; float: none; padding: 0 ; margin: 0 auto}
    
    #content img{margin-bottom: 50px; margin-top: 50px}
    
}