html * {
    font-family: 'Titillium Web', sans-serif;
}

div {
    font-size: 1vw;
    line-height: 1.4em;
}

body {
    overflow-x: hidden;
    background-color: #282828;
}

a:hover, a:visited, a:link, a:active {
    text-decoration: none;
}

/* Scales an image proportionally with its container */
img {
    max-width: 100%;
    height: auto;
    width: auto \9; /* ie8 */
}

.block {
    overflow: hidden;
    position: relative;
}

p {
    font-size: 1.5vw;
    font-weight: 300;
    margin-bottom: .5em;
    line-height: 1.4em;
}

p.big {
    font-size: 1.6vw;
    font-weight: 400;
}

p.medium {
    font-size: 1.3vw;
}

p.small {
    font-size: .8vw;
    font-weight: 700;
    letter-spacing: .2em;
}

.small-size p {
    font-size: 1.2vw;
    line-height: 90%;
}

p.uppercase {
    text-transform: uppercase;
}

p.bold-700 {
    font-weight: 700;
}

h1 {
    font-size: 4vw;
    font-weight: 700;
    text-transform: uppercase;
}

h2 {
    font-weight: 700;
    font-size: 2.5vw;
    text-transform: uppercase;
    margin-top: .5em;
    margin-bottom: .25em;
}

.centered {
    text-align: center;
}

.white {
    color: white;
}

a.color-orange, .color-orange {
    color: #f06f31;
}

/* START Block One Styles */
#hand-block {
    height: 52%;
}

#hand-block-title {
    left: 55%;
    top: 32%;
}

#hand-block-title p {
    /*margin-bottom: 1%;*/
    margin-bottom: 0;
}

#hand-block-title h1 {
    margin-top: 1%;
    margin-bottom: 1%;
}

#crowd-image {
    width: 100%;
    position: absolute;
}

#hand-image {
    width: 32.15%;
    top: 15%;
    left: 12.3%;
}

#scroll-please {
    left: 43.5%;
    top: 84%;
    text-transform: uppercase;
    width: 14%;
}

#scroll-button {
    width: 26%;
    margin-right: 5%;
    margin-left: 5%;
}

.scroll-text {
    margin-top: 9.2%;
    /*margin-right: 10%;*/
}

/* END Block One Styles */

/* START Cog Styles */
#cog-block {
    /*margin-top: 300px;*/
    height: 43%;
    background-color: #185989;
}

#cog-content {
    float: left;
    width: 35%;
    height: 100%;
    margin-top: 9%;
    color: white;
    padding-left: 3%;
}

#cog-content a {
    color: #d0a242;
}

a.learn-more-link {
    font-size: 1vw;
    text-transform: uppercase;
    float: left;
}

#cog-section {
    width: 60%;
    position: relative;
    left: 38%;
    top: 25%;
}

.cog-item {
    position: absolute;
    float: left;
}

#cog-yellow {
}

#cog-orange {
    left: 32.5%;
    top: -1.9%;
}

#cog-green {
    left: 65%;
    top: 32%;
}

#cog-blue {

    left: 50.5%;
    top: -54.5%;
}

.cog-medium {
    width: 37.65%;
}

.cog-small {
    width: 33.6%;
}

.cog-header {
    font-size: 1.9vw;
    font-weight: bold;
    line-height: 108%;
    text-align: center;
}

.cog-header-small {
    width: 70%;
    left: 14%;
    top: 18%;
}

.cog-header-medium {
    color: white;
    width: 100%;
}

.cog-header-medium-top {
    top: 29%;
}

.cog-header-medium-bottom {
    top: 56%;
}

.cog-header-medium-line {
    border-bottom: thin solid white;
    width: 58%;
    height: 5%;
    top: 47%;
    left: 21%;
}

.cog-list {
    font-size: 1.1vw;
    left: 20%;
    top: 40%;
    width: 70%;
}

.cog-list ul {
    padding-left: 18%;
}

/* END Cog Styles */

/* START Fish Block */
#fish-block {
    height: 40%;
    background-color: #2f3030;
}

#fish-content {
    position: absolute;
    left: 3%;
    top: 28%;
}

#fish-learn {
    display: none;
}

#fish-content h2 {
    margin-top: 4%;
    margin-bottom: 2%;
}

#fish-content p {
    margin-bottom: 0;
}

#fish-content p.last {
    margin-bottom: 3%;
}

#computer-man {
    background-image: url("../images/computer-man.png");
    background-size: cover;
    height: 100%;
    width: 28.50%;
    left: 43.9%;
}

/* END Fish Block */

/* START Element Styles */
#element-block {
    height: 47%;
    background-color: #7c497e;
}

#element-block-title {
    position: absolute;
    width: 100%;
    top: 4%;
    text-align: center;
}

#element-block-title h2 {
    margin-bottom: 0;
}

#element-block-title p {
    font-size: 1.1vw;
}

.ip-element {
    position: absolute;
    /*left: 30%;*/
    /*top: 25%;*/
    width: 7%;
    height: 35%;
    /*float: left;*/
    /*margin-right: 5%;*/
    /*top: 200px;*/
}

.ip-element-text {
    /* http://www.greywyvern.com/?post=323 Used for positioning the text centered relative to parent, even when larger width than parent. */
    position: relative;
    right: 50%;
    text-align: center;
    white-space: nowrap;
    margin-top: 5%;
    cursor: pointer;
}

.ip-element img {
    cursor: pointer;
}

.ip-element-text p {
    /* Used for positioning the text centered relative to parent, even when larger width than parent. */
    display: inline-block;
    margin-right: -100%;
    font-weight: 700;
    color: white;
    font-size: 1.4vw;
    cursor: pointer;
}

/* END Element Styles */

/* START Case study block */

#case-study-block {
    height: 43%;
}

#case-study-image {
    top: -110%;
    position: absolute;
}

.carousel-button {
    position: absolute;
    width: 4.78%;
    height: 28.83%;
    margin: auto 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

#case-study-content {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    width: 70.8%;
    height: 85.2%;
}

#case-study-text {
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto 7%;
}

#case-study-text p {
    font-size: 1.1vw;
}

#case-study-text h2 {
    margin: 0;
}

#case-study-carousel-right {
    right: 0;
}

#case-study-carousel {
    margin-bottom: 4%;
}

#case-study-carousel .slide {
    /*width: 26.94%;*/
    margin-right: .5%;
    margin-left: .5%;
}

/* END Case Study Block */

/* START Contact Block */
#contact-block {
    height: 33%;
    background-color: #474646;
}

#contact-line-divider {
    position: absolute;
    border-left: thin solid #7c7c7c;
    height: 75%;
    width: 1%;
    left: 50%;
    top: 7%;
}

.small-line-divider {
    position: absolute;
    border-left: thin solid #7c7c7c;
    height: 15%;
    width: 1%;
}

#contact-text-left {
    position: absolute;
    left: 5%;
    top: 10%;
    width: 35%;
}

#contact-text-right {
    position: absolute;
    top: 10%;
    left: 60%;
    height: 90%;
    width: 35%;
}

#email-icon {
    position: absolute;
    width: 2.78%;
    height: 11.88%;
    left: 60%;
    top: 32%;
}

.img-fix {

}

#phone-icon {
    position: absolute;
    width: 2.99%;
    left: 60%;
    top: 55.7%;
}

#email-line {
    left: 12%;
    top: 24%;
}

#phone-line {
    left: 12%;
    top: 49.8%;
}

#email-text {
    position: absolute;
    left: 17%;
    top: 25%;
}

#phone-text {
    position: absolute;
    left: 17%;
    top: 51%;
}

/* END Contact Block */

/* START Scaled Div - Allows for our blocks to scale horizontally and vertically in a proportional way */
.scaled-div {
    width: 100%; /* pick whatever width you want */
}

.scaled-div .outer {
    width: 100%;
    padding-top: 75%; /* defines aspect ratio */
    position: relative;
}

.scaled-div .outer .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* END Scaled Div */

/* Absolute text */
.absolute-front {
    position: absolute;
    z-index: 1;
}

.fish-video-container {
    position: absolute;
    right: -17.5em;
    height: 100%;
    width: 50%;
    overflow: hidden;
    background-color: white;
}

.video-container {
    position: absolute;;
    height: 100%;
    right: -2%;
}

video {
    width: auto !important;
    height: 100% !important;

}

video.move {
    width: 100% !important;
    height: auto !important;
    position: absolute;
    opacity: .5;
}

.digital-natives {
    background-color: #538AB4;
    color: white;
    position: absolute;
    height: 0px;
    width: 0px;
    right: 0;
    display: none;
}

.infobesity {
    background-color: #F06F31;
    color: white;
    height: 0px;
    width: 0px;
    left: 43.9%;
	padding-top: 3%;
    top: 50%;
    position: absolute;
    display: none;
}

div.case-study-normal p {
    font-size: 0.9vw;
    font-weight: normal;
}

.case-study-title {
    font-weight: bold;
    text-align: center;
}

div.case-study-header {
    font-weight: bold;
    font-size: 1vw;
}

.case-study-details {
    display: none;
}

.bi-custom {
    width: 60%;
}

.more-info {
    cursor: pointer;
}

.middle {
    text-align: left;
    margin-top: 4%;
    width: 50%;
    position: relative;
    left: 25%;
}

.middle p {
    font-size: 2em;
}

.text-biw {
    position: absolute;
    /*background-image: url("../images/text-biw.png");*/
    /*background-size: 100% 13%;*/
    /*background-repeat: no-repeat;*/
    top: 0;
    left: 27%;
    height: 36%;
    width: 18%;
    z-index: 1;
}

#move-the-middle-video {
    position: absolute;
    width: 100%;
    top: 0;
    opacity: .4;
}

#move-the-middle-content {
    position: absolute;
    width: 40%;
    right: 0;
    top: 26.22%;
    color: white;
    opacity: 0.9;
    z-index: 1;
}

#move-the-middle-block {
    /**
    background-image: url("../images/move-the-middle-bg.png");
    background-size: cover;	
    **/
    height: 40%;
}

.element-selection-text {
    display: none;
    top: 4em;
    position: relative;
}

p.text-header {
    font-size: 2vw;
    font-weight: bold;
    color: white;
}

p.text-normal {
    color: white;
}

#modal-close-elements {
    color: white;
    opacity: 100%;
}

#element-popup {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 80%;
    background-color: rgba(124, 73, 126, 0.97);
    display: none;
    padding: 0 0 0 0;
}

a.color-purple {
    color: rgb(124, 73, 126);
}

div.close-link {
    font-weight: bold;
    color: white;
    position: absolute;
    right: 15%;
    float: right;
    top: 5%;
}

div.pop-content {
    position: relative;
    top: 25%;
    width: 60%;
    left: 25%;
}

#middle-learn {
    display:none;
    position: absolute;
    left: 7.45%;
    top: 26.22%;
    color: white;
    opacity: 0.9;
    width: 40%;
}

#move-the-middle-overlay {
    position: relative;
    left: -4%;
    top: 1.2em;
}

/*.video-container {*/
/*width: 100%;*/
/*height: 100%;*/
/*position: absolute;*/
/*padding:0;*/
/*margin:0;*/
/*left: 0;*/
/*top: 0;*/
/*!*z-index: -1000;*!*/
/*overflow:hidden;*/
/*}*/

/*.video-player {*/
/*min-height: 100%;*/
/*!*min-width:100%; - if fit to width *!*/
/*position:absolute;*/
/*bottom:0;*/
/*left:0;*/
/*}*/

.text-message {
    text-align:center;
}

.text-message h3 {
    margin-top: 0;
    margin-bottom: 1%;
    font-size: 1.5vw;
    font-weight: bold;
    color: #929235;
}

.text-message span {
    margin-top: 0;
    margin-bottom: 1%;
    font-size: 1vw;
    font-weight: bold;
}