﻿body {
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    touch-action: inherit;
    touch-action: pan-up;
    touch-action: pan-down;
    touch-action: pinch-zoom;
}


    .title1 {
        font-size: 47px;
        margin-top: 5px;
        margin-left: 5px;
        position: absolute;
        top: 30px;
        width: 250px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 100;
        line-height: 15px;
        animation-name: slideright;
        animation-duration: .75s;
        animation-iteration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out;
        animation-delay: .25s;
        opacity: 0;
    }

    @keyframes slideright {
        0% {
            opacity: 0;
            transform: translatex(-30%);
        }

        100% {
            opacity: 1;
            transform: translatex(0);
        }
    }

    .title2 {
        font-size: 21px;
        width: 250px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 800;
        line-height: 26px;
        top: 42px;
        margin-left: 5px;
        animation-name: slideleft;
        animation-duration: 3s;
        animation-iteration: 1;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out;
        opacity: 0;
        position: absolute;
    }

    @keyframes slideleft {
        0% {
            opacity: 0;
            transform: translatex(10%);
        }

        100% {
            opacity: 1;
            transform: translatex(0);
        }
    }

    .title3 {
        font-size: 18px;
        width: 250px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 300;
        line-height: 14px;
        margin-left: 5px;
        top: 73px;
        animation-name: fadein;
        animation-duration: 1.75s;
        animation-iteration: 1;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out;
        opacity: 0;
        animation-delay: 2.5s;
        position: absolute;
    }

    @keyframes fadein {
        0% {
            opacity: 0;
        }

        60% {
            opacity: .3;
        }

        100% {
            opacity: 1;
        }
    }

    .tabletlayout {
        max-width: 991px;
        display: grid;
        justify-content: space-between;
        grid-template-columns: 160px 1fr 80px;
		background-color:#FFF;
    }

    .menu {
        padding-top: 20px;
        padding-right: 20px;
        font-size: 26px;
        font-family: 'Microsoft YaHei';
        color: #101010;
        transition: .6s;
        text-align: right;
        cursor: pointer;
    }

        .menu a:link {
            padding-top: 20px;
            padding-right: 20px;
            font-size: 26px;
            font-family: 'Microsoft YaHei';
            color: #101010;
            transition: .6s;
            cursor: pointer;
        }

        .menu a:hover {
            padding-top: 20px;
            padding-right: 20px;
            font-size: 26px;
            font-family: 'Microsoft YaHei';
            color: #808080;
            transition: .6s;
            cursor: pointer;
        }

        .menu a:visited {
            padding-top: 20px;
            padding-right: 20px;
            font-size: 26px;
            font-family: 'Microsoft YaHei';
            color: #101010;
            transition: .6s;
            cursor: pointer;
        }

        .menu a:active {
            padding-top: 20px;
            padding-right: 20px;
            font-size: 26px;
            font-family: 'Microsoft YaHei';
            color: #101010;
            transition: .6s;
            cursor: pointer;
        }

    .toplinks {
        font-size: 18px;
        text-align: center;
        color: #3a9018;
        padding: 10px;
        align-items: center;
        max-width: 981px;
        font-family: 'Microsoft Tai Le';
        font-weight: 200;
        animation-name: topup;
        animation-duration: 1.5s;
        animation-iteration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out;
        animation-delay: .5s;
        opacity: 0;
        z-index: 1;
        margin-top: 80px;
    }

    @keyframes topup {
        0% {
            opacity: 0;
            transform: translatey(30%);
        }

        100% {
            opacity: 1;
            transform: translatey(0);
        }
    }

    .toplinks a:link {
        font-size: 18px;
        text-align: left;
        padding: 10px;
        margin-top: 10px;
        text-decoration: none;
        color: #5aa406;
        transition: .6s;
        z-index: 1;
        margin-top: 80px;
    }

    .toplinks a:hover {
        font-size: 18px;
        border-left: solid 1px #7acf40;
        border-right: solid 1px #7acf40;
        padding: 10px;
        margin-top: 10px;
        text-decoration: none;
        color: #7acf40;
        transition: .6s;
        z-index: 1;
        margin-top: 80px;
        text-align: left;
    }

    .toplinks a:active {
        font-size: 18px;
        text-decoration: none;
        padding: 10px;
        margin-top: 10px;
        color: #5aa406;
        transition: .6s;
        z-index: 1;
        margin-top: 80px;
        text-align: left;
    }

    .toplinks a:visited {
        font-size: 18px;
        text-decoration: none;
        padding: 10px;
        margin-top: 10px;
        color: #5aa406;
        transition: .6s;
        z-index: 1;
        margin-top: 80px;
        text-align: left;
    }




    .overlay {
        /* Height & width depends on how you want to reveal the overlay (see JS below) */
        height: 100%;
        width: 0;
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        background-color: rgb(0,0,0); /* Black fallback color */
        background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
        overflow-x: hidden; /* Disable horizontal scroll */
        transition: 0.7s; 
		
		/* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    }
    /* Position the content inside the overlay */
    .overlay-content {
        position: relative;
        top: 15%; /* 25% from the top */
        width: 100%; /* 100% width */
        text-align: center; /* Centered text/links */
        margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
    }
    /* The navigation links inside the overlay */
    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-family: 'Microsoft YaHei UI';
        font-size: 30px;
        color: #818181;
        display: block; /* Display block instead of inline */
        transition: 0.3s; /* Transition effects on hover (color) */
    }
        /* When you mouse over the navigation links, change their color */
        .overlay a:hover, 
        .overlay a:focus {
        color: #f1f1f1;
		
		
        }
    /* Position the close button (top right corner) */
    .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }

    .mytag {
        font-family: 'Microsoft YaHei UI';
        font-size: 14px;
        color: #4e4e4e;
        background-color: #101010;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 0;
        width: 100%;
        height: auto;
        font-weight: 400;
      
        
    }

        .mytag a:link {
            color: #707070;
            transition: .6s;
            text-decoration: none;
            font-weight: 400;
            background-color: #101010;
            
        }

        .mytag a:hover {
            color: #CCC;
            transition: .6s;
            text-decoration: none;
            font-weight: 400;
            background-color: #101010;
            bottom: 0px;
        }

        .mytag a:visited {
            color: #707070;
            transition: .6s;
            text-decoration: none;
            font-weight: 400;
            background-color: #101010;
            
        }

        .mytag a:active {
            transition: .6s;
            text-decoration: none;
            font-weight: 400;
            color: #707070;
            background-color: #101010;
            
        }

.bottomlinks {
    column-count:2;
    column-fill:balance;
    column-gap:50px;
    line-height: 21px;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 70px;
    display: block;
    font-family: 'Microsoft YaHei UI';
    font-size: 16px;
    font-weight: 200;
    background-color: #121212;
	max-width:980px;
	
}

        .bottomlinks a:link {
            position: relative;
            text-align: left;
            text-decoration: none;
            color: #818181;
            transition: .6s;
            background-color: #121212;
            font-size: 16px;
            font-weight: 200;
        }

        .bottomlinks a:hover {
            position: relative;
            text-align: left;
            text-decoration: none;
            color: #FFF;
            transition: .6s;
            font-size: 16px;
            font-weight: 200;
            background-color: #121212;
        }

        .bottomlinks a:active {
            position: relative;
            text-align: left;
            text-decoration: none;
            color: #FFF;
            font-size: 16px;
            font-weight: 200;
        }

        .bottomlinks a:visited {
            position: relative;
            text-align: left;
            text-decoration: none;
            color: #FFF;
            transition: .6s;
            background-color: #121212;
            font-size: 16px;
            font-weight: 200;
        }
.bottomlinks2 {
    column-count: 2;
    column-fill: balance;
    column-gap: 50px;
    line-height: 21px;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 70px;
    display: block;
    font-family: 'Microsoft YaHei UI';
    font-size: 16px;
    font-weight: 200;
    color: #eaeaea;
	background-color: #121212;
	max-width:980px;
}

    .bottomlinks2 a:link {
        position: relative;
        text-align: left;
        text-decoration: none;
        color: #818181;
        transition: .6s;
        background-color: #121212;
        font-size: 16px;
        font-weight: 200;
    }

    .bottomlinks2 a:hover {
        position: relative;
        text-align: left;
        text-decoration: none;
        color: #FFF;
        transition: .6s;
        font-size: 16px;
        font-weight: 200;
        background-color: #121212;
    }

    .bottomlinks2 a:active {
        position: relative;
        text-align: left;
        text-decoration: none;
        color: #FFF;
        font-size: 16px;
        font-weight: 200;
    }

    .bottomlinks2 a:visited {
        position: relative;
        text-align: left;
        text-decoration: none;
        color: #FFF;
        transition: .6s;
        background-color: #121212;
        font-size: 16px;
        font-weight: 200;
    }

.bottomlinks3 {
    column-count: 2;
    column-fill: balance;
    column-gap: 50px;
    line-height: 21px;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 70px;
    display: block;
    font-family: 'Microsoft YaHei UI';
    font-size: 16px;
    font-weight: 200;
    color: #eaeaea;
	background-color: #121212;
	max-width:980px;
}

    .bottomlinks3 a:link {
        position: relative;
        text-align: left;
        text-decoration: none;
        color: #818181;
        transition: .6s;
        background-color: #121212;
        font-size: 16px;
        font-weight: 200;
    }

    .bottomlinks3 a:hover {
        position: relative;
        text-align: left;
        text-decoration: none;
        color: #FFF;
        transition: .6s;
        font-size: 16px;
        font-weight: 200;
        background-color: #121212;
    }

    .bottomlinks3 a:active {
        position: relative;
        text-align: left;
        text-decoration: none;
        color: #FFF;
        font-size: 16px;
        font-weight: 200;
    }

    .bottomlinks3 a:visited {
        position: relative;
        text-align: left;
        text-decoration: none;
        color: #FFF;
        transition: .6s;
        background-color: #121212;
        font-size: 16px;
        font-weight: 200;
    }
.formmailer {
    display: block;
    border-width: 0px;
    width:150px;
    height:40px;
	background-color: #121212;
}

    .formmailer .input {
        justify-content: center;
        text-align: center;
        transition: .6s;
        height: 30px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-width: 0px;
        width: 100%;
        margin-bottom: 20px;
        font-size: 16px;
    }

        .formmailer .input a:link {
            transition: .6s;
            text-align: center;
            height: 30px;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 100%;
            border-width: 0px;
            margin-bottom: 20px;
            font-size: 16px;
            background-color: #FFF;
            color: #121212;
        }

        .formmailer .input a:hover {
            transition: .6s;
            text-align: center;
            height: 30px;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 100%;
            border-width: 0px;
            margin-bottom: 20px;
            font-size: 16px;
            background-color: #eaeaea;
            color: #121212;
        }

        .formmailer .input a:focus {
            background-color: #FFF;
            color: #121212;
            transition: .6s;
            text-align: center;
            height: 30px;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 100%;
            border-width: 0px;
            margin-bottom: 20px;
            font-size: 16px;
        }

    .formmailer .submit {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        background-color: #FFF;
        color: #121212;
        transition: .6s;
        text-align: center;
        height: 40px;
        width: 80px;
        margin-bottom: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-width: 0px;
        cursor: pointer;
    }

        .formmailer .submit a:link {
            background-color: #101010;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transition: .6s;
            text-align: center;
            color: #eeeeee;
            height: 40px;
            width: 80px;
            margin-bottom: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
            border-width: 0px;
        }

        .formmailer .submit a:hover {
            background-color: #FFF;
            color: rgba(0, 0, 0, 0.2);
            transition: .6s;
            text-align: center;
            height: 40px;
            width: 80px;
            margin-bottom: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
            border-width: 0px;
        }
.colorb {
	
	background-color:#FFF;
	width:100%;
	z-index:1000;
	top:0;
	
	
	
}
.bottomtabletlayout {
	z-index:1;
	position:absolute;
	padding-right:10%;
	left:0;
	
	
}
.content {
	
	margin-left:5%;
	margin-right:5%;
	font-weight:200;
	line-height:32px;
	color:#000;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}
    
.content a:link {
	
	transition:.6s;
	color: #151515;
	
}
.content a:hover {
	
	transition:.6s;
	color: #000;
	
}
.content a:visited {
	
	transition:.6s;
	color: #151515;
	
}
.content a:active {
	
	transition:.6s;
	color: #151515;
	
}
.photoright {
	padding-left:30px;
	padding-top:20px;
	padding-bottom:20px;
	
	
	
}

.lgcontent {
	
	font-size:40px;
	color:#000;
	
}

.medcontent {
	
	font-size:28px;
	color:#000;
	
}
