@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900');
@font-face {
    font-family: 'socialicoregular';
    src: url('fonts/socialico-webfont.eot');
    src: url('fonts/socialico-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/socialico-webfont.woff2') format('woff2'),
         url('fonts/socialico-webfont.woff') format('woff'),
         url('fonts/socialico-webfont.ttf') format('truetype'),
         url('fonts/socialico-webfont.svg#socialicoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* default */
img{border:0;}
h1,h2,h3,h4,h5,h6{ font-weight:normal;}
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd,dt { padding:0; margin:0;}
ul,ol { list-style:none;}
a { text-decoration:none;color: inherit;}
a.lined {text-decoration: underline;}
.hidden{ text-indent:-999em; overflow:hidden;}
hr.hide-line{ padding:0; margin:0; display:none;}
.clear{ clear:both;}
.clearfix:after {content:"."; display:block; height:0; clear:both;visibility:hidden;}
.clearfix {display:inline-block;}


/* Hide from IE Mac \*/
.clearfix {display:block;}/*




/* Clearfix */
.clrfix:before,
.clrfix:after {
    content: " ";
    display: table;
}
.clrfix:after {
    clear: both;
}
.clrfix {
    *zoom: 1;
}

.row {max-width: 1024px;margin: 0 auto}
.fl {float:left;}
.fr {float:right;}
.btn {display: inline-block;text-align: center;background:#AE984A;font-family: "Roboto";font-weight: 400;font-size: 13px;padding: 12px 33px;color:#fff;transition: background 0.2s ease,color 0.2s ease;}
.btn:hover {background: #fff;color:#AE984A;}
.social a {font-family: "socialicoregular";font-weight: 400;line-height: 100%;display: inline-block;transition: color 0.2s ease;font-size: 45px;color:#AE984A;margin: 0 5px}
.social a:hover {color:#fff;}
.social {display: inline-block;vertical-align: middle;margin: 0 0 0 10px}
img {max-width: 100%}
.txt-center {text-align: center;}
/* Body */
body{ font-family:"Roboto"; /*background:url(../images/body-bg-top.jpg) repeat-x #FFF;*/ margin:0; padding:0; text-align: center; color:#000;}

/*header*/
nav a#pull { display: none;}


header{ margin:0 auto; padding:0; background:#AE984A;}
header nav {margin:0 auto; padding:0;}
header nav ul { padding:0; margin:0;}
header nav ul li { display: inline-block;vertical-align:top; padding:0; margin:0 18px;}
header nav ul li a { display:block; width:auto; height:auto; margin:0; padding:18px 0; font-size:13px; line-height:120%; text-align:center;font-weight: 500;color:#fff;background: url(../images/navbar.jpg)repeat-x center bottom -6px;transition: background-position 0.2s ease;}
header nav ul li a:hover,header nav ul li.active-menu a {background-position: center bottom;}

/*header*/
#banner{ min-height: 610px;background: radial-gradient(circle,#333333,#111111);color:#fff;text-align: left;border-bottom:10px solid #AE984A;}
.bn-left {max-width: 390px;margin: 100px 0 0}
.bn-right {margin: 50px 0 0}
#banner p {font-family: "Raleway";font-size: 15px;line-height: 160%;margin: 0 auto 20px}
#banner p:first-of-type {background: url(../images/gold-bar.jpg)no-repeat top left;padding: 30px 0 0}
#banner .logo {margin: 0  auto 55px}
.bn-img {outline: 10px solid rgba(255,255,255,0.6);outline-offset: -9px}

/* main */
#main { }

/* content */
#content{padding: 60px 0 90px}
#content h1 {font-weight: 300;font-size:60px;color:#AE984A;line-height: 120%;letter-spacing: 1px;background: url(../images/line.png)no-repeat center center;margin: 0 auto 10px}
#content h3 {font-weight: 300;font-size: 18px;line-height: 120%;color:#000;margin: 0 auto 15px}
#content p {font-family: "Raleway";font-size: 15px;color:#000;line-height: 180%;margin: 0 auto 25px; font-weight: 500;}
.cn-top {/*max-width: 875px;*/max-width: 925px;margin: 0 auto 10px}
.cn-right {max-width: 645px;text-align: left;margin: 90px auto 0}
.cn-left {max-width:540px;margin:70px auto 0;}
#content .cn-left p {background :url(../images/txt-border.png)no-repeat left top,url(../images/txt-border2.png)no-repeat right bottom;padding: 35px;box-sizing: border-box;font-weight: 600;}
.cn-img img {outline: 5px solid rgba(255,255,255,0.7);outline-offset:-20px }
.cn-bot {max-width: 990px;margin: 0 auto}
#content .social a:hover {color:#000;}
#content .btn:hover {background: #000;color:#fff;}
.cn-bot .cn-img {max-width: 315px}

/*overview*/
.overview {text-align:left;background: radial-gradient(circle,#333333,#111111);color:#fff;padding: 45px 0 55px}
.ov-right img {outline:8px solid rgba(255,255,255,0.65);outline-offset: -8px}
.ov-left {max-width: 678px;}
.overview h2 {font-weight: 300;font-size: 50px;color:#A08A58;line-height: 120%;letter-spacing: 1px;background: url(../images/ov-line.jpg)no-repeat center right;margin: 0 auto 35px}
.overview .top  {margin: 0 auto 30px}
.overview .top p {font-weight: 300;font-size:18px;margin: 30px auto 0}
.overview h3 {font-weight: 500;font-size: 22px;margin: 0 auto 30px}
.overview .bot p {font-family: "Raleway";font-size: 15px;line-height: 180%;margin: 0 auto 35px}

/*projects*/
.projects {padding: 70px 0 175px}
.projects h2 {background: url(../images/projects-line2.png)no-repeat center center;margin: 0 auto 25px}
.projects h2,.projects h3 {font-weight: 300;font-size: 50px;line-height: 120%;letter-spacing: 1px;color:#A08A58;}
.projects h3 {font-size:30px;margin: 0 auto;text-align: left;}
.projects p {font-family: "Raleway";font-weight: 500;font-size: 15px;color:#000;line-height: 180%;margin:0 auto 20px}
.pj-box dl {margin: 0 auto;}
.pj-box dl dt {background:#AEB3D6;display: block;min-height: 136px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;-o-box-sizing: border-box;padding: 20px 0 0}
.pj-box dl dt span {font-weight: 500;font-size: 12px;line-height: 120%;color:#000;display: block;max-width: 165px;margin: 10px auto 0;}
.pj-box dl dd {margin: 5px auto 0;}
.pj-box h4, .pj-box h5 {font-weight: 500;color:#000;line-height: 120%;font-size: 13px;margin: 0 auto;}
.pj-box h5 {font-size: 11px}
.pj-box dl dt a img {transition: transform 0.2s ease;margin: 0 auto}
.pj-box dl dt a:hover img {transform: scale(1.2);}


.pj-box-vid dl{margin: 0 auto}
.pj-box-vid dl dt{margin: 0 auto;padding: 12px 0;background: #333333;position: relative;}
.pj-box-vid dl dt:before {content:url(../images/play.png);position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);transition: transform 0.2s ease;}
.pj-box-vid dl dt:hover:before {transform: translate(-50%,-50%) scale(1.2);}
.pj-box-vid dl dd{margin: 0 auto;}
.pj-box-vid h4 {font-weight: 500;color:#000;line-height: 120%;font-size: 13px;margin: 10px auto 0;}

.pj-box-vid, .pj-box {margin: 60px auto 0;max-width: 975px}

.bx-wrapper {max-width: 100% !important}
.bx-wrapper .bx-viewport {border:none;box-shadow: none;left:auto;height:auto !important;}
.bx-wrapper .bx-prev {background:url(../images/prev.jpg)no-repeat center top;left:-60px;}
.bx-wrapper .bx-next {background:url(../images/next.jpg)no-repeat center top;right:-60px;}
.bx-wrapper .bx-next:hover,.bx-wrapper .bx-prev:hover {background-position: center top}
.bx-wrapper .bx-controls-direction a {height:38px;width:38px;}


.projects .learning {text-align: left;margin: 60px auto 0}
.projects .learning h6 {font-weight: 500;font-size: 22px;color:#535353;margin:15px auto}
.learning form input[type="text"]{width: 36px;height: 36px;font-family: "Raleway";font-weight: 400;font-size: 20px;color:#000;border:1px solid #000;text-align: center;transition: border-color 0.2s ease,box-shadow 0.2s ease;}
.learning form label {font-family: "Raleway";font-weight: 400;font-size: 20px;color:#000;display: inline-block;visibility: middle;margin:0 0 20px 20px}
.learning form input[type="submit"]{display: inline-block;text-align: center;background:#AE984A;font-family: "Roboto";font-weight: 400;font-size: 13px;padding: 12px 33px;color:#fff;transition: background 0.2s ease,color 0.2s ease; border:none;}


.learn-box {max-width: 850px;margin: 30px auto 0;border:1px solid #51488C;position: relative;}
.learn-box ul li {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;-o-box-sizing: border-box;padding: 0;text-align: center;}
.learn-box ul li > div {display: inline-block;text-align: left;}
.learn-box .bx-wrapper .bx-prev {left:20px;}
.learn-box .bx-wrapper .bx-next {right:20px;}
.learning .bx-wrapper .bx-pager,.learning .bx-wrapper .bx-controls-auto {bottom: auto;top:5px;padding: 0}
.learning .bx-wrapper  {margin:0;padding:15px 0 20px;}
.learning #ctr {text-align: center;margin: 15px auto 0 }
.learning .bx-wrapper .bx-pager.bx-default-pager a {height: 5px; width:5px;background: #D6D6D6;border-radius: 0;margin: 0 8px}
.learning .bx-wrapper .bx-pager.bx-default-pager a:hover, .learning .bx-wrapper .bx-pager.bx-default-pager a.active {background: #51478C}

.learn-box ul li #hidden_div{width: 86%; margin: 50px auto 0;display: none;}
.learn-box ul li #hidden_div table{width:100%;}
/*.learn-box ul li #hidden_div table{border:1px solid #51488c;}*/
.learn-box ul li #hidden_div table td {text-align: center;}
.learn-box ul li #hidden_div table tr[data-rank="1"]{border:2px solid #000;background: #AE984A;color:#fff;}
.learn-box ul li #hidden_div table tr[data-rank="1"] td {color:#fff;}
.learn-box ul li #hidden_div table tr[data-rank="1"] td .btn {background: #000;color:#fff;}
.learn-box ul li #hidden_div table tr[data-rank="1"] td .btn:hover {background: #fff;color:#AE984A;;}
.learn-box ul li #hidden_div table tr[data-rank="2"]{border:2px solid #000;}
.learn-box ul li #hidden_div table tr td{font-family: "Raleway";font-weight: 500;font-size: 15px;color:#000;margin:0 auto 20px;padding: 10px 0}
.learn-box ul li #hidden_div h3{font-size: 18px; font-weight: 600; margin: 0 0 4px;}
.learn-box ul li #hidden_div p a.btn{padding: 4px 28px;}
.learn-box ul li #hidden_div p a.btn:hover{background: #000; color: #fff;}
.learn-box ul li #hidden_div .sect{ width:48%; display: inline-block;}
.learn-box ul li #hidden-div #style-result{font-family: "Raleway";font-weight: 500;font-size: 15px;color:#000;line-height: 180%;}
.projects #style-result div {padding: 5px 10px}
.projects #style-result div p {margin: 0 auto;}
.result-table .btn:hover {background: #000;color:#fff;}
/*.result-table .head {border:1px solid #51488c;}*/
/*.learn-box ul li #hidden_div table.result-table .head td {padding: 10px 0}*/
.learn-box ul li #hidden_div table td:first-of-type {text-align: left;text-indent: 30px}
.learn-box ul li #hidden_div table .head td:first-of-type {text-align: center;text-indent: 0;}
.projects #style-result div#first, .projects #style-result div#second {border:2px solid #000; }
.projects #style-result div#first {background:#AE984A;border-bottom:none;}
.projects #style-result div#first p {color:#fff;}

#learn-prev {position: absolute;top:55%;left:20px;}
#learn-next {position: absolute;top:55%;right:20px;}
#learn-prev:hover, #learn-next:hover {cursor: pointer;}

/* contact */
.contactBox { width:500px; margin:0 auto; padding:10px 0 10px; background:#F6F1E6; border: 1px #D71015 solid; color:#000;}
.contactBox p { padding:0 10px 0 !important;}
.contactBox a { color:#000 !important;}
.contactBox strong { color:#D71015; font-family: 'GoudyStoutRegular';}
.contactBox-left { float:left; width:250px; margin:0; padding:0;}
.contactBox-right { float:right; width:250px; margin:0; padding:0;}

.contactForm { width:500px; margin:10px auto; padding:0 0 10px; background:#F6F1E6; border: 1px #D71015 solid; color:#000;}
.contactForm label { display:block; margin:0; padding:5px 0 5px 25px; font-size:14px; line-height:120%;}
.contactForm input[type=text] { display:block; width:450px; min-height:25px; margin:0 auto; padding:0; font-size:14px; line-height:120%; border:0; font-family:Georgia, "Times New Roman", Times, serif;}
.contactForm input[type=submit] { display:block; width:100px; margin:0 auto; padding:0 0 2px 0; text-align:center; font-size:14px; line-height:120%; font-family:Georgia, "Times New Roman", Times, serif;}
.contactForm textarea { display:block; width:450px; margin:0 auto; padding:0; font-size:14px; line-height:120%;}

/* aside */
aside{ float:right; width:280px; min-height:444px; margin:0; padding:0; background:#C63;}

/*footer*/
footer{color:#fff;border-top:10px solid #AE984A;}
footer .top {background: radial-gradient(circle,#333333,#111111);position: relative;padding: 60px 0 80px}
footer .top .row {max-width: 940px}
footer .top .mid {width:375px;left:0;right:0;margin: 0 auto;position: absolute;}
footer .top .left, footer .top .right {width:200px;margin: 50px auto 0}
footer p {font-weight: 400;font-size: 15px;letter-spacing: 1px;color:#EDE037;margin: 60px auto 0}
footer p span {font-weight: 500;letter-spacing: 0;font-size: 14px;color:#fff;display: block;}
footer p span a {transition: color 0.2s ease;}
footer p span a:hover {color:#AE984A;}
footer .social a {margin: 0 2px;color:#fff;}
footer .social a:hover {color:#AE984A;}
footer p.tel {margin: 30px auto 0}
footer p.tel span {font-size: 40px}


footer .bot {margin:0 auto; padding:0;background:#AE984A;}
footer .bot ul { padding:0; margin:0;}
footer .bot ul li { display: inline-block;vertical-align:top; padding:0; margin:0 18px;}
footer .bot ul li a { display:block; width:auto; height:auto; margin:0; padding:18px 0; font-size:13px; line-height:120%; text-align:center;font-weight: 500;color:#fff;background: url(../images/navbar.jpg)repeat-x center bottom -6px;transition: background-position 0.2s ease;}
footer .bot ul li a:hover,footer .bot ul li.active-menu a {background-position: center bottom;}

#content.inner h1 {background: none;font-size: 40px;border-bottom:5px solid #AE984A;margin: 0 auto 20px;padding: 0 0 20px}
#content.inner {text-align: left;min-height: 400px;padding: 40px 0}

.list {border-collapse: collapse;width:100%;}
.list tr {border-bottom:1px dotted #ddd;}
.list td {padding: 10px;font-family: "Raleway";font-size: 15px;color:#545454;line-height: 180%;}
.list td:first-of-type img {vertical-align: middle;margin: 0 10px 0 0}
.list td:nth-of-type(2) {font-size: 12px;padding: 0 0 0 50px}

#note-list {list-style-type: none;margin: 0 auto;padding: 0;}
#content #note-list h3 {background: linear-gradient(#333333,#111111);color:#Fff;font-size: 22px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;-o-box-sizing: border-box;padding: 8px 15px}
#content #note-list p {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;-o-box-sizing: border-box;padding: 0 0 0 3.5%}
#content #note-list li {display: none;padding: 0 0 20px}
#content #note-list h6 {font-size:19px;font-weight: 700;font-style:italic;line-height: 180%;margin: 0 auto 25px;font-family: "Raleway";}

#lf-warnings { border:2px solid #000;background:#F9BA13;text-align: center;padding: 5px 30px;display: inline-block;max-width: 60%;border-radius: 10px;display: none;margin: 30px auto 0;}
.txt-center {text-align: center;}
.italicize {font-style: italic;}
.box{/*background:radial-gradient(circle,#333333,#111111); border:2px solid #A08A58; padding:20px; box-sizing: border-box;*/ margin:20px auto 0; text-align: center; /*border-radius: 20px;*/}
.box p{font-size:12px; line-height: 160%;/* color: #fff*/;text-align: left}
.box ul.list{list-style: disc; display: inline-block; padding:0 0 0 20px; margin:0 auto;}
.box ul.list li { text-align: left;/* color: #fff*/;}
.box ul.list li a{font-size: 12px;/* color: #fff*/;transition: color 0.2s ease;}
.box ul.list li a:hover{text-decoration: underline;color:#AE984A;}
/*for the modal*/

.custom-link { text-decoration: underline; font-style: italic; }