/* ------------------------- GLOBAL -------------------------*/
aside { position:fixed; right:0; top:60%; z-index: 1}
aside ul li { display:block}
aside ul li button { outline:0; border:0; color:#FFF; font-size:14px; line-height:30px; cursor:pointer; width:100%; padding: 0 20px; text-decoration:none ;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
    transition: opacity 1s;}
aside ul li button:hover { opacity:0.6;}

.contact_form { width: 100%; min-height:200px; margin:0; margin-top:20px; background: url(http://aod.education/images/contactus-bg.jpg); background-repeat: no-repeat; background-size:cover; float:left; clear:left; position:relative; z-index:999}
.contact_form .contact_title { font-size:45px; top: 10px; margin-left:7%; position:relative; color: #fff; font-weight: 600}

.contact_form div {width: 23%; float:left; position:relative ; margin:2% 5%; text-align: center; color: #fff; font-weight: 500}
.contact_form div header { margin-bottom:5px ; font-size:20px; text-align: left}
.contact_form div input, .contact_form div textarea { float:left; clear:left; position:relative ; margin-bottom:20px; font-size:18px; outline:0 }
.contact_form div input {width:300px;}
.contact_form div textarea {width:100%; height: 200px}
.contact_form div p {font-size: 20px; font-weight: 200 ; color:floralwhite; text-align: center; line-height: 30px}
.contact_form div button {width:100px;height: 100px; margin-top: 10px ; border: 0px; border-radius: 100px; outline: 0; cursor: pointer}
.contact_form div button:hover { background-color: #333;
    -webkit-transition: background-color 500ms ease-in-out;
    -moz-transition: background-color 500ms ease-in-out;
    -o-transition: background-color 500ms ease-in-out;
    -ms-transition: background-color 500ms ease-in-out;
    transition: background-color 500ms ease-in-out;}

.en-btn {background: url(../images/send_button.png)}
.zh-btn {background: url(http://aod.education/zh/images/send_button_zh.png)}

.content { position: relative; margin:0; top:20px}
.content section {width: 85%; position: relative; display: block; clear: both; }
.content article {margin-bottom:30px;min-width: 320px; max-width:80%; margin-left:8%; float: left; position: relative;display: block}
.content .header {font-size:55px; margin-left:7%}
.content hgroup { font-size:35px; margin-top:50px; color:#606060;}
.content p { font-size:16px; margin-top:20px; color: #777; line-height:25px; margin-top:50px; }
.content ul li { font-size:16px; font-weight: bold; margin-top:20px; color: #777; line-height:10px;}
.content p .question { font-size:20px; font-weight: bold ;color:#000; line-height:30px}
.content a, .content a:active, .content a:visited, .content a:link {color:#2ea2cc; text-decoration: none}
.content a:hover { text-decoration: underline}

.scrollup {text-align: center !important; display: none !important; z-index:999}
.scrollup img { position: fixed; bottom: 60px; right: 0px; height: 40px;}

/* ---------------------------------------------------------------- */

@media all and (max-width: 1024px) {
    
body {min-width: 750px; overflow: auto}    
    
aside {top:55%}    
    
.contact_form { float:left;position:relative; margin-top:0px;}
.contact_form div {width: 35%; margin-left:8%; }

.contact_form div p { width: 90% }
.contact_form div button { margin-left: -50px}

.map {; overflow: hidden}
.map iframe { width: 600px; height: 400px}

.scrollup img { bottom: 0px;}

}
/* ---------------------------------------------------------------- */

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

body {min-width: 320px}    
    
aside { position:relative; top:inherit; text-align: center;width: 100% !important; margin: 0; padding: 0; } 
#tabs {margin-left: -40px }
aside ul li button { font-size:20px; line-height:50px; padding: 0 50px;width: 100% !important; }
    
.contact_form { margin-top:0px;}
.contact_form div {width: 90%; margin-left:20px; }

.contact_form div input, .contact_form div textarea { width: 90% }
.contact_form div p { width: 90%; text-align: left;}
.contact_form div button { text-align: center; margin: 0 20%}
    
.content article {min-width: 100%; max-width:90%; margin-left:20px;}  
.content .header {font-size:50px; margin-left:2% }
.content hgroup { font-size:25px; border-bottom: 2px dotted #ccc }
.content p { font-size:16px;line-height:25px; }
.content ul li { font-size:16px;line-height:22px;}
.content p .question { font-size:20px; line-height:30px}
    
    
.map iframe { width: 90%; height: 400px}

.scrollup { display: block !important;}    
.scrollup img { bottom: 0px;}

}