/* #Site Styles
================================================== */

/* General */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body {font-family: 'open_sansregular'; font-size: 15px; color: #262626;font-weight: normal; font-style: normal; }
img { border: 0; display: inline-block; max-width: 100%; }
a { text-decoration: none;  transition: all 0.4s ease 0s; font-size:14px; color:#226caf; display:inline-block; outline:none;}
ul,li{padding:0; margin:0; list-style:none;}
.clear {clear: both; height: 1px;}

/* Wrapper */
.wrapper{ background: url(../images/home-bg.png) no-repeat; background-size:cover; position: relative; width: 100%; float:left; height:100%;}

/* Mid Center */
.mid_center{max-width:1314px; width:100%; margin:0 auto; padding:0 15px;}

/* header */
header{ float:left; width:100%; position:fixed; top:0; left:0; padding:40px 0px 90px 0; z-index:9;transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;}
header.small { background: #fff; box-shadow: 1px 1px 10px #000; padding: 15px 0px;transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;}
header .logo{ width: 100%; float:left;max-width: 224px; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;}
header.small .logo { max-width: 135px;transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;}
header .right{ float:right; width:100%; max-width:960px; padding-top:20px;transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;}
header.small .right{ padding-top:6px;transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;}
h1{ font-size:40px; line-height:53px; font-family: 'montserratsemibold'; font-weight:normal; letter-spacing:6px; text-transform:uppercase; color:#103a5a;transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;}
header.small h1{ font-size:30px; line-height:40px;transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;}
h1 span{ display:block; font-size:30px; line-height:26px; font-family: 'montserratregular'; letter-spacing:4px;transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;}
header.small h1 span{ font-size:18px; line-height:15px;transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;}
header .right .name{ float:left; width:auto;}
header .right .contact-btn{ float:right; width:auto;}
.contact-btn a { background-color: #103a5a; color: #fff;font-family: "montserratblack"; font-size: 13.5px; font-style: normal; font-weight: normal; letter-spacing: 2px; line-height: 18px; padding: 18px 20px 15px; text-decoration: none;text-transform: uppercase;}
.contact-btn a:hover{ background-color:#001a3a;}

.content{ float:left; width:100%;margin-top: 233px;}
.about-detail{ float:left; width:100%; padding-bottom:100px;}
.leftSide { float: left; width: 30%; padding:0 0 0 20px;}
.leftSide img {margin: 0 0 25px;}
.leftSide a.email { background: url(../images/email-icon.png) no-repeat left center;}
.leftSide a.phone { background: url(../images/phone-icon.png) no-repeat left center;}
.leftSide a.linkedin { background: url(../images/linkedin-icon.png) no-repeat 6px center;}
.leftSide a.blue-skye { background: url(../images/logo.png) no-repeat left center; background-size:65px;}
.leftSide a { color: #262626; float: left; font-family: "open_sanssemibold"; font-size: 18px; font-style: normal; font-weight: normal; line-height: 35px; padding: 15px 0 15px 80px;text-decoration: none;}
.rightSide { float: left; padding: 0 0 0 40px; width: 70%;}
.rightSide h3{ font-size:17px; line-height:23px; font-family: 'open_sansbold'; font-weight:normal; font-style: normal; text-transform:uppercase; color:#354c6b; margin-bottom:13px;}
.rightSide p, .rightSide li{ color: #262626; font-family: "open_sansregular"; font-size: 15px; font-style: normal; font-weight: normal; line-height: 24px; margin: 0 0 25px;}
.rightSide ul{ margin:0 0 25px; padding-left: 16px;}
.rightSide li{ margin:0;  list-style: initial;}
.education_activities { float: left; width: 100%;}
.education_activities .heading { cursor: pointer; float: left; width: 100%;}

.education_activities .heading h2 { background: url(../images/round-arrow.png) no-repeat left 7px; color: #262626; font-family: "open_sanssemibold"; font-size: 18px; font-style: normal; font-weight: normal;letter-spacing: 0;line-height: 46px; margin: 0;padding: 0 0 0 48px; text-transform: none;}
.education_activities .heading.active h2 { background: url(../images/round-arrow-bottom.png) no-repeat left 7px;}
.education_activities .description { display: none; float: left; padding: 0 30px 20px 50px; width: 100%;}
.education_activities .description ul{ margin:0;}


/* Media CSS */
@media only screen and (max-width: 1279px) {
.content{ margin-top:194px;}
header{ padding:25px 0 90px;}
header.small{ padding:15px 0 11px;}
.mid_center{ width:95%;}
header .logo{ max-width:170px;}
header .right{ max-width:690px;}
h1, header.small h1{ font-size:24px; line-height:35px; letter-spacing:4px;}
h1 span,  header.small h1 span{ font-size:17px; line-height:22px;}
.leftSide a{ font-size:16px;}
}
@media only screen and (max-width: 1023px) {
.content{ margin-top:173px;}
header .logo{ max-width:120px;}
header.small .logo{ max-width:120px;}
header .right{ max-width:550px; padding-top:15px;}
header.small .right{ padding-top:11px;}
h1, header.small h1{ font-size:18px; line-height:30px;}
h1 span, header.small h1 span{ font-size:12px; line-height:14px;}
.contact-btn a{ font-size:11px; line-height:15px; padding:12px 15px 10px;}
.leftSide a{ font-size:13px; background-size:40px !important; padding:15px 0 15px 50px;}
.leftSide a.linkedin{ background-size:34px; background-position:left center;}
}
@media only screen and (max-width: 767px) {
header, header.small{ position:static; padding:25px 0 40px 0; box-shadow:none; background:transparent;}
header .right .contact-btn{ position:fixed; right:15px; bottom:0;}
header .logo, header.small .logo{ float:none; margin:0 auto; max-width:190px;}
header .right{ max-width:100%; padding-top:11px; text-align:center;}
.content{ margin-top:0;}
.leftSide{ width:100%; padding:0;}
.leftSide a{ font-size:16px; padding:15px 0 15px 60px;}
.rightSide{ width:100%; padding:40px 0 0 0;}
.education_activities .description{ padding:30px 0 20px 50px}
header .right .name{ width:100%;}
.leftSide{ text-align:center;}
}
@media only screen and (max-width: 479px) {
.education_activities .heading h2{ line-height:30px; font-size:16px; background-size:23px; padding:0 0 0 38px;}
.education_activities .heading.active h2 { background-size:23px;}
}