html {
    background-color: #fff;
    /*background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);*/
    /*background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);*/
    -webkit-font-smoothing: antialiased;
    font-family: "Source Sans Pro", Helvetica Neue, Arial, sans-serif;
}

body {
    margin: auto;
    width: 1024px;
    font-family: "Source Sans Pro", Helvetica Neue, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    background-color: #fff;
}

#container {
    width: 1024px;;
    margin: auto;
}

          /* ****************************** HEADER CSS STYLES ****************************** */

header {
    height: 768px;
    width: 100%;
    background: #00a5d9;
    background-image: url(bg/top_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    text-align: center;
    color: white;
}

#top_titles {
   padding-top: 50px;
}

#top_titles h1 {
    text-transform: uppercase;
    font-size: 95pt;
    font-weight: 700;
    letter-spacing: 1pt;
    opacity: 0.15;
}

#top_titles h2 {
    text-transform: uppercase;
    font-size: 45pt;
    font-weight: 700;
    letter-spacing: 2pt;
    margin-top: -108px;
}

#top_titles h3 {
    font-size: 18pt;
    font-weight: 400;
    margin-top: 70px; 
}

.brief {
    width: 630px;
    margin: auto;
    margin-top: 210px;
}

.brief h1 {
    text-transform: uppercase;
    font-size: 18pt;
    font-weight: 600;
}

.brief p {
    text-align: left;
    font-size: 14pt;
    line-height: 24pt;
    font-weight: 400;
    margin-top: 30px;
}

.brief p b {
    font-weight: 600;
}

          /* ****************************** END HEADER CSS STYLES ****************************** */

          /* ****************************** INTRO CSS STYLES ****************************** */

#intro {
    height: 768px;
    width: 100%;
    /* THIS BACKGROUND IMAGE SHOULD BE LARGER THAN 768 PX HIGH */
    background-color: transparent;
    background-image: url(bg/companies_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    text-align: center;
    color: #333333;
}
#intro .intro_contain {
    width: 825px;
    margin: auto;
}

#intro #companies {
    display: inline;
    margin: auto;
    text-align: left;
}

#companies #RIT {
    width: 45%;
    float: left;
    padding-top: 20px;
}

#companies #poppin {
    width: 45%;
    float: right;
}

#companies .name {
    height: 125px;
    width: 125px;
    margin: auto;
    margin-bottom: 25px;
}

 /* ************************************ THESE WILL CHANGE ********************************** */

#companies #RIT .name img { 
}

#companies #poppin .name img {
    margin-top: 50px;
}

 /* ************************************** END ************************************ */

#RIT p {
    font-size: 12pt;
    line-height: 21pt;
    font-weight: 400;
}

#poppin p {
    font-size: 12pt;
    line-height: 21pt;
    font-weight: 400;
}

#companies .plus {
    display: inline;
    margin: auto;
}

#RIT p b {
    font-weight: 600; 
    color: #00457c;
}

#poppin p b {
    font-weight: 600;
    color: #00a5d9;
}

#student {
    width: 100%;
    height: 275px;
    clear: both;
    padding-top: 30px;
}

#student .photo {
    float: left;
    width: 35%;
    height: 275px;
}

#student .about {
    float: right; 
    width: 55%;
    text-align: left;
}

#student .about h1 {
    color: #00a5d9;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 32pt;
    margin-bottom: 50px;
}
            

#student .about .quote h2 {
    color: #00a5d9;
    font-size: 48pt;
    font-weight: 900;
    font-family: 'IM Fell French Canon', serif;
    margin-top: 20px;
    margin-bottom: 0;
}

#student .about p {
    font-size: 12pt;
    line-height: 21pt;
    font-weight: 600;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 0;
    margin-bottom: 0;
}

.explore {
    padding-top: 1px;
    clear: both;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16pt;
    letter-spacing: 3pt;
    color: #00a5d9;
    
}

/* END INTRO CSS STYLES */

/* PROCESS CSS STYLES */

.whitespace {
    width: 20px;
    height: 100px;
    margin-left: 353px;
    
}

.process {
    height: 768px;
    width: 100%;
    background-color: #00a5d9;
    background: linear-gradient(to right bottom, #00a5d9, #1694c4);
    text-align: left;
    color: white;
}

.process .num {
    border-radius: 30px;
    width: 50px;
    height: 50px;
    background-color: white;
    text-align: center;
    font-size: 21pt;
    font-family: "Fira Sans", "Source Sans Pro", Helvetica Neue, Arial, sans-serif;
    margin-left: -25px;
    margin-right: 65px;
}

.process .num p {
    color: #00a5d9;
    padding-top: 9px;
}

.process .copy {
    width: 90%;
    float: right;
    margin-top: -80px;
}

.process h1 {
    color: white;
    opacity: 0.6;
    margin-left: -5px;
    text-transform: uppercase;
    font-size: 45pt;
    font-weight: 700;
    letter-spacing: 2pt;
}

.process h2 {
    font-size: 21pt;
    font-weight: 600;
}

.process .para_contain {
    float: left;
    width: 600px;
    margin-top: -30px;
}

.process p {
    font-size: 14pt;
    line-height: 24pt;
}

.idea {
    background-color: #00a5d9;
    background: linear-gradient(to right bottom, #00a5d9, #1694c4);
    margin-top: -1px;
}

.idea h1 {
    opacity: 0.8;
}

.idea .content {
	width: 810px;
	margin-right: 55px;
}

.feedback {
    background-color: #fff;
    background: linear-gradient(to right bottom, #eee, #fff);
    color: #333;
}

.feedback .num p {
    color: #00457c;
}

.feedback h1 {
    color: #00457c;
    opacity: 0.6;
}

.feedback .image {
    position: absolute;
    width: 1000px;
    margin-left: 20px;
    margin-top: 400px;
}

.prototype {
    background-color: #00a5d9;
    background-image: url(bg/prototype_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.problem {
    background-color: #00a5d9;
}

.problem h1 {
}

.problem p b {
    font-weight: 600;
}


.problem .image {
    position: absolute;
    width: 75%;
    margin-left: 100px;
    margin-top: 410px;
}

.final {
    background: #00a5d9;
    background-image: url(bg/final_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
}


.final h1 {
    color: #00a5d9;
}

.final .para_contain {
    float: left;
    width: 340px;
    margin-top: -30px;
}

.final p b {
    color: #00a5d9;
    font-weight: 600;
}

.content {
    width: 865px;
    height: 768px;
    float: right;
    border-left: 2px white solid;
}

.content2 {
    width: 865px;
    height: 768px;
    float: right;
}

/* animated elements */
.animateblock {
  padding: 8px 0;
  color: #fff;
  opacity: 0.8;
  -webkit-transition: all 0.55s linear;
  -moz-transition: all 0.55s linear;
  transition: all 0.55s linear;
}

.animateblock.animated {
  opacity: 1;
}

/* animation transition styles */
.animateblock.btm {
  display: block;
  width: auto;
  text-align: left;
  margin-top: 30px;
}
.animateblock.btm.animated {
  margin-top: 0;
}

/* FEATURES CSS STYLES */

#features {
    height: 768px;
    width: 100%;
    background-color: white;
    background-image: url(bg/features.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    text-align: center;
    color: #333333;
}

.features_contain {
    width: 740px;
    margin: auto;
}

.features_contain h1 {
    color: #333;
    font-size: 24pt;
    font-weight: 400;
}

.features_contain .element {
    float: left;
    width: 50%;
    text-align: left;
    margin-top: 50px;
    display: inline;
    background-color: forestgreen;
}

.features_contain .element .feature_num {
    width: 30px;
    height: 30px;
    background-color: #00a5d9;
    border-radius: 30px;
    float: left;
    display: inline;
    margin-top: 15px;
    margin-right: 12px;
}

.features_contain .element .feature_num p {
    text-align: center;
    color: white;
    font-family: 'Fira Sans', 'Source Sans Pro', sans-serif;
    font-size: 14pt;
    margin-top: 1px;
}

.features_contain .element .element_contain {
    width: 88%;
}

.features_contain .element h2 {
    font-size: 16pt;
    font-weight: 400;
}

.features_contain .element p {
    font-size: 12pt;
    line-height: 21pt;
}

/* END FEATURES CSS STYLES */

/* SUMMARY CSS STYLES */

#closing {
    height: 768px;
    width: 100%;
    background-color: #00a5d9;
    background-image: url(bg/summary_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    text-align: center;
    color: white;
}

#closing_img {
    height: 768px;
    width: 100%;
    background-image: url(media/summary_img.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.summary_contain {
    width: 500px;
    float: right;
    margin-right: 5%;
    margin-top: 100px;
}

#closing h1 {
    font-size: 50pt;
    font-weight: 900;
    letter-spacing: 0pt;
    line-height: 54pt;
    color: white;
    opacity: 0.5;
    text-transform: uppercase;
    text-align: left;
    margin-left: -3px;
}

#closing p {
    text-align: left;
    font-size: 14pt;
    line-height: 24pt;
    margin-top: -78.75px;
}

#closing .takeaway {
    width: 60%;
    margin: auto;
    clear: both;
}

#closing .quote h2 {
    font-size: 48pt;
    font-weight: 900;
    font-family: 'IM Fell French Canon', serif;
}

#closing .takeaway p {
    text-align: center;
    font-size: 24pt;
    line-height: 36pt;
    font-weight: 700;
    text-transform: uppercase;
    padding-top: 20px;
}

/* END SUMMARY CSS STYLES */


/* BOTTOM CSS STYLES */

#bottom {
    height: 768px;
    width: 100%;
    background-color: white;
    background-image: url(bg/footer_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    text-align: center;
    color: #333333;
}


.bottom_contain {
    min-height: 100%;
    margin-bottom: -75px;
}

.bottom_contain:after {
  content: "";
  display: block;
}


#bottom .summary {
    width: 60%;
    margin: auto;
    clear: both;
    padding-top: 0px;
}

#bottom .summary h1 {
    font-size: 64pt;
    color: #1a3770;
    opacity: 0.5;
    text-transform: uppercase;
    text-align: center;
}

#bottom .summary p {
    font-size: 14pt;
    line-height: 24pt;
    text-align: left;
}

#bottom .takeaway {
    width: 60%;
    margin:auto;
    clear: both;
}

#bottom .web {
    height: auto;
    display: inline;
    clear: both;
}

.web .web_contain {
    width: 660px;
    margin: auto;
    margin-top: 60px;
}

#bottom .web h1 {
    font-weight: 600;
    font-size: 18pt;
    color: #3f83cf;
    padding-bottom: 30px;
}

#bottom .web .team {
    float: left;
    width: 33%;
}

#bottom .web .team p {
    font-size: 14pt;
    font-weight: 600;
    text-align: center;
}


footer, .page-wrap:after {
  height: 75px; 
}


footer {
    width: 100%;
    height: 75px;
    background-color: #00a5d9;
    color: white;
    clear: both;
}

footer .contain {
    margin-left: 50px;
    margin-right: 50px;
    padding-top: 22px;
}

footer .back {
    float: left;
}

footer .top {
    float: right;
}

footer a, a:visited, a:hover, a:active {
    text-decoration: none;
    color: white;
}

/*  END BOTTOM CSS STYLES */

/* ************************************************************************************************************************************************************************************************************************************************************************************************************************************ */

/* ******** MODAL ********** */
#myBtn {
		border: 1px white solid;
		border-radius: 0px;
		width: 180px;
		height: 45px;
		background: transparent;
		webkit-transition-duration: 0.4s; /* Safari */
		transition-duration: 0.4s;
		font-family: "Source Sans Pro", Helvetica Neue, Arial, sans-serif;
		font-size: 12pt;
		letter-spacing: 2px;
		color: white;
    -webkit-box-shadow: none;
          box-shadow: none;
	}

	#myBtn:hover {
		cursor: pointer;
		background: white;
		color: black;
        -webkit-box-shadow: none;
          box-shadow: none;
	}

	#myBtn:active {
		background: white;
		color: black;
        -webkit-box-shadow: none;
          box-shadow: none;
	}

#myBtn:focus, #myBtn:focus:active {
    -webkit-box-shadow: none;
          box-shadow: none;
}

#myBtn2 {
		border: 1px white solid;
		border-radius: 0px;
		width: 180px;
		height: 45px;
		background: transparent;
		webkit-transition-duration: 0.4s; /* Safari */
		transition-duration: 0.4s;
		font-family: "Source Sans Pro", Helvetica Neue, Arial, sans-serif;
		font-size: 12pt;
		letter-spacing: 2px;
		color: white;
    -webkit-box-shadow: none;
          box-shadow: none;
	}

	#myBtn2:hover {
		cursor: pointer;
		background: white;
		color: black;
        -webkit-box-shadow: none;
          box-shadow: none;
	}

	#myBtn2:active {
		background: white;
		color: black;
        -webkit-box-shadow: none;
          box-shadow: none;
	}

#myBtn2:focus, #myBtn:focus:active {
    -webkit-box-shadow: none;
          box-shadow: none;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 30px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(51,51,51,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	font-family: "Source Sans Pro", Helvetica Neue, Arial, sans-serif;
    position: relative;
    background-color: #fff;
    margin: auto;
    padding: 0;
    width: 80%;
    height: 680px;
    box-shadow: 0 4px 8px 0 rgba(51,51,51,0.2),0 6px 20px 0 rgba(51,51,51,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin: 15px;
    margin-top: 22px;
}

.close:hover,
.close:focus {
    opacity: 0.4;
    text-decoration: none;
    cursor: pointer;
}

.close2 {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin: 15px;
    margin-top: 22px;
}

.close2:hover,
.close2:focus {
    opacity: 0.4;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #00a5d9;
    color: white;
    font-size: 14pt;
}

.modal-body 
{
	padding: 2px 16px;

}
ul {
  list-style-type: none;
  width: 90%;
  color: #333;
}
 
ul li h3 {
  font: 600 21px 'Source Sans Pro', Helvetica, Verdana, sans-serif;
  line-height: 21pt;
  margin-top: 10px;

}
 
li img {
  float: left;
  margin: 0 15px 0 0;
  margin-right: 50px;
}
 
li p {
  font: 400 16px 'Source Sans Pro', Helvetica, Verdana, sans-serif;
  margin-top: -15px;
}
 
li {
  padding: 10px;
  overflow: auto;
}

.modal_copy {
    width: 81%;
    float: right;
    
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}


/* ******* SLIDER ********** */
#slider_container {
	width: 1024px;
	height: 768px;
	background-color: #00a5d9;
    background: linear-gradient(to right bottom, #00a5d9, #1694c4);
	font-family: "Source Sans Pro", Helvetica Neue, Arial, sans-serif;
}
#slider {
	text-align: center;
	width: 1024px;
	height: 768px;
	margin: 0;
	padding: 0;
}

#slider input {
	display: none;
}

#slider label, a {
	color: #ef023f;
	cursor: pointer;
	text-decoration: none;
}
#slider label:hover {
	color: #ff0042 !important;
}
/* NECESSARY DON"T CHANGE */
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }

#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }



#overflow {
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

#slides article img {
	width: 1024px;
	height: 768px;
}

#slides .inner {
	width: 500%;
	line-height: 0;
}

#slides article {
	width: 20%;
	float: left;
}

#controls {
	width: 100%;
	height: 100px;
	margin-top: -400px;
	z-index: 10000;
}

#controls label { 
	display: none;
	width: 50px;
	height: 50px;
	z-index: 10000;
}

#active {
	margin: 23% 0 0;
	text-align: center;
}

#active label {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	display: inline-block;
	width: 50px;
	height: 50px;
	background: #f89e67;
}

#active label:hover {
	background: #ccc;
	border-color: #777 !important;
}

#controls label:hover {
	opacity: 0.8;
}

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(1) 
/*#slide5:checked ~ #controls label:nth-child(2)*/ {
	background: url('media/next_arrow.png') no-repeat;
    background-size: 100% 100%;
    height: 75px;
    width: 75px;
	float: right;
	margin-top: 10px;
    margin-right: 10px;
	display: block;
	background-color: transparent;
}


#slide1:checked ~ #controls label:nth-child(4),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
	background: url('media/back_arrow.png') no-repeat;
	float: left;
    background-size: 100% 100%;
    height: 75px;
    width: 75px;
    margin-top: 10px;
	display: block;
	background-color: transparent;
}



/* cctooltip Box */

.caption_contain {
	width: 100%;
}

.caption {
	z-index: 50;
    background-color: rgba(255,255,255,0.3);
    color: #333;
    line-height: 20px;
    opacity: 0;
    position: absolute;
    width: 1024px;
    height: 160px;
    padding-top: 10px;
    /*margin-left: 262px;*/
    margin-top: 600px;
	-webkit-transform: translateZ(0);
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.caption h3 {
	color: white;
	margin: 0 0 5px;
	font-size: 16pt;
    line-height: 24pt;
    font-weight: 400;
    letter-spacing: 3px;
	font-style: normal;
	padding: 5px;
	width: 500px;
	margin-left: 262px;
	text-align: center;
}

.caption h3 b {
    font-weight: 600;
    letter-spacing: 0px;
}

.caption h4 {
	color: white;
	margin: 0 0 5px;
	font-weight: normal;
	font-size: 12pt;
    line-height: 21pt;
	font-style: normal;
	background-color: rgba(255, 255, 255 1.0);
	padding: 5px;
	text-align:left;
	width: 500px;
	margin-left: 262px;
}



/* cc-slider Styling */

#slides {
	background: transparent;
	z-index: 0;
	
}


/* Animation */

#slides .inner {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

#slider {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#controls label{
	-webkit-transform: translateZ(0);
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-o-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
}

#slide1:checked ~ #slides article:nth-child(1) .caption,
#slide2:checked ~ #slides article:nth-child(2) .caption,
#slide3:checked ~ #slides article:nth-child(3) .caption,
#slide4:checked ~ #slides article:nth-child(4) .caption,
#slide5:checked ~ #slides article:nth-child(5) .caption {
	opacity: 1;
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
}