/*======
Copyright 2013
Written for - www.canadianinvestortraining.com

swatch colors
-------------
blue: #2b57a6
grey; #434345
red: red

box-shadow: inset 0 0 5px rgba(0, 0, 0, .35);
======== */

/** RESETS **/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}fieldset,img,abbr,acronym{border:0}

/* GLOBAL */
/* html, body { width:100%;  overflow:hidden} */
body {font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; color: #434345}
section {width: 100%; height: inherit; margin: 0 auto}
.big {height: 750px}
.inner {width: 960px; margin: 0 auto; overflow: hidden;}
.left {float: left; width: 50%}
.right {float: right; width: 50%}
strong {font-weight: 700}

/* TITLES */
h1, h2, h3, h4, h5, h6 {font-size: 90px; color: #2b57a6; text-align: center; font-family: 'Source Sans Pro', sans-serif; font-weight: 300}

/* LINKS */
a {color: #3669ef}
a:hover {color: red}

/* BUTTONS */
.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  color: #ffffff;
  font-size: 32px;
  padding: 10px 40px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  color: white
}

/* HEADER */
header {position: fixed; top: 20px; left: 0; width: 100%; z-index: 50; height: 100px; background-color: #434343}
#hero {box-shadow: inset 0 0 5px rgba(0, 0, 0, .35); height: 620px; width: 100%; background: white url(../backgrounds/hero.jpg) no-repeat center center}
#hero div {text-align: left; width: 960px; margin: 0 auto}
#hero h2 {font-size: 86px; text-shadow:#000 1px 1px; color: white; line-height: 600px; text-align: center; font-weight: 400}
.main-logo {margin-top: 250px; text-align: left}
#hero div.btn-holder {width: 100%; text-align: center; margin-top: -190px}

/* FOOTER */
footer {padding: 60px 0}
.footer-logo {margin: 0 auto; width: 75px; height: 75px}
footer h1 {font-size: 40px}
.copy {width: 100%; text-align: center; font-size: 13px; color: #555; padding-top: 20px}

/* NAV */
nav {width:960px; height:100px; margin:0 auto; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAgMjAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiMyRDU4QTUiIGQ9Ik02Ni43NCwxMTAuNTA1bC02MS43MjIsMC4wMDZ2MjkuODgyYzE4LjI1OC0xMS43NiwzOS4yMDEtMTkuNjg4LDYxLjcyMi0yMi42NDRWMTEwLjUwNXoiLz4NCgk8cGF0aCBmaWxsPSIjRUEyMTI3IiBkPSJNMTMwLjg3MywxMjMuMDA5di00OS4xNEg2OS4xNjd2NDMuNTcxYzUuNzI5LTAuNjY1LDExLjU0My0xLjA0MSwxNy40NTEtMS4wNDENCgkJQzEwMi4wMjMsMTE2LjM5OSwxMTYuODc4LDExOC43MjIsMTMwLjg3MywxMjMuMDA5eiIvPg0KCTxwYXRoIGZpbGw9IiMyRDU4QTUiIGQ9Ik0xOTUuMDIxLDE2Mi4zNzdMMTk1LjAxLDM3LjIzM0wxMzMuMywzNy4yM3Y4Ni41NjdDMTU2Ljk5MSwxMzEuNDk3LDE3OC4wOTUsMTQ0Ljg4OSwxOTUuMDIxLDE2Mi4zNzd6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==) no-repeat left center; background-size: 85px auto}
nav ul {float:right}
nav li {display:inline; list-style:none; float:left; margin-top:35px; margin-left: 10px}
nav li a{text-decoration:none; display:inline-block; text-align:center; padding:5px; color:#fff; text-shadow:#000 1px 1px}
nav li a.selected,nav li a:hover{color:red}
nav h1 {color: white; font-size: 40px; width: 250px; padding: 15px 0 0 50px; float: left}
nav h1 span {font-weight: 400; font-size: 20px; float:  left; line-height: 3px; padding-left: 60px}

.login-btn {padding: 5px 15px;   background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9); border-radius: 5px; margin-left: 10px; color: white; margin-top: 30px}
.login-btn:hover {  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);}
.login-btn a, .login-btn a:hover {color: white}
.login-btn a i {padding-right: 5px}

.logout-btn {background: red}

/* ABOUT US */
#about-us {padding: 60px 0}
#about-us p {text-align: center}

/* CONTACT US */
#contact-us {padding: 60px 0 25px}
#contact-us p {text-align: center; padding-bottom: 40px; width: 80%; margin: 0 auto}
.badge {background: url(../contact/badge-small.png) no-repeat center center; width: 400px; height: 340px; margin: 0 auto}
.badge .map {border: 1px solid #d2d9dd; margin: 50px 0 0 40px; width: 80%; height: 175px; background: url(../contact/canadian-investment-training-map.jpg) no-repeat center center}
address {text-align: center; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 24px; line-height: 22px; padding-top: 20px}

/* THE COURSE */
#course h3 {margin: -40px auto 30px}
#course h2 {font-size: 36px; color: white; text-shadow:#000 1px 1px}
#course {box-shadow: inset 0 0 5px rgba(0, 0, 0, .35); background-color: #edf2f5; padding: 60px 0}
.course-holder {width: 90%; background: white url(../backgrounds/nav-back.jpg) no-repeat center -120px; border-radius: 5px; margin: 0 auto 40px; text-align: center; padding: 20px 0}
.course-logo {text-align: center; width: 100%}
.course-holder ul {padding-top: 40px; text-align: left; margin-left: 55px}
.left .course-holder ul {margin-left: 35px}
.course-holder ul li {list-style-type: disc; list-style-position: inside}
.bright-background {background: #d4e6f2 url("//dvamv2ytt7bw6.cloudfront.net/assets/bg-gradient-f4960fda06e0ee5708b937c451b6ae33.png") left top repeat-y;
background: -webkit-gradient(linear, left top, right top, color-stop(0, #fcfcfc), color-stop(0.25, #efefde), color-stop(1, #d4e6f2));
background: -webkit-linear-gradient(left, #fcfcfc 0%, #efefde 25%, #d4e6f2 100%);
background: -moz-linear-gradient(left, #fcfcfc 0%, #efefde 25%, #d4e6f2 100%);
background: -o-linear-gradient(left, #fcfcfc 0%, #efefde 25%, #d4e6f2 100%);
background: -ms-linear-gradient(left, #fcfcfc 0%, #efefde 25%, #d4e6f2 100%);
background: linear-gradient(left, #fcfcfc 0%, #efefde 25%, #d4e6f2 100%)}

/* EMPLOYEES SECTION */
#employees-section {padding: 60px 0; margin-top: 150px}

/* RESPONSIVE DESIGN */
@media screen and (max-width: 800px) {
	nav, #hero div, .inner {width: 90%; padding-left: 5%; padding-right: 5%}
	#hero h2 {font-size: 60px}
	#hero div.btn-holder {width: 90%}
	nav ul li {display: none}
	.login-btn {display: block}
	nav {background-position-x: 5%}
	.right, .left {float: left; width: 100%; margin: 0 auto}
	.badge .map {margin: 50px auto 0; width: 50%}
}

@media screen and (max-width: 600px) {
	#hero h2 {font-size: 50px}
	.badge .map {width: 60%}
	.form-holder {margin-top: 50px}
}

@media screen and (max-width: 568px) {
	header {position: relative; top: 0; left: 0}
	#hero h2 {line-height: 200px}
	#hero div.btn-holder {margin-top: -40px}
	#hero {height: 300px}
	body {font-size: 16px}
}

@media screen and (max-width: 480px) {
	.login-btn {font-size: 16px}
	#hero h2 {line-height: 60px; padding-top: 50px}
	a.btn {font-size: 30px}
	#hero div.btn-holder {margin-top: 35px}
	.course-logo img {width: 150px; height: 150px}
	.badge .map {width: 80%}

}
@media screen and (max-width: 320px) {
	h1, h2, h3, h4, h5, h6 {font-size: 50px}
	#course h2 {font-size: 26px}
	.course-holder {background-position-y: -130px}
	.course-holder ul li {list-style-position: outside}
	.course-holder ul, .left .course-holder ul {margin-left: 45px; width: 70%}
	footer h1 {line-height: 40px}
	.badge .map {width: 90%}
	.login-btn {display: none}
	nav {background-position-x: 20px}
	nav h1 {padding-left: 50px; width: 250px}
}