@charset "UTF-8";
/* CSS Document */
body {
	margin:0;
	background-color: #fff;
	box-sizing: border-box;
}
.header-body {
	margin-left:10%;
	margin-right:10%;
}
.header {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	margin: 10px 0 10px 0;
	display: flex;
	/*align-items: center;
    justify-content: flex-start;*/
}
img {
	display: block;
}
.w-65 {
	width:65%;
}
.w-100 {
	width:100%;
}
h1 {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size:45px;
	color:#fff;
	margin:0px;
	line-height: 1.3;
}
h2 {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 35px;
	color:#fff;
	margin:10px;
}
.fw-700 {
	font-weight: 700;
}
p {
	font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #fff;
    margin: 0;
	
}
a {
	text-decoration: none;
}
.a-work {
	font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #fff;
    margin: 0;
	text-decoration: none;
	letter-spacing: 2px;
	padding: 10px 30px;
	background-color:#fff;
	margin-top: 5%;
}
.bold {
	font-weight: 700;
}
.kern {
	letter-spacing: 5px;
}
.ml-100px {
	margin-left:100px;
}
.black {
	color:#000;
}
.mid-grey {
	color:#535353;
}
.header-left {
	display: flex;
	align-items: center;
  	justify-content: flex-start;
	width: 60%;
}
.vimeo-frame {
	/*width:65%;*/
	margin:auto;
}
.footer-left {
	display: block;
	width: 100%;
}
.header-right {
	display: flex;
	align-items: center;
  	justify-content: flex-end;
	width: 40%;
}
.fw-thin {
	font-weight: 100;
}

.header-link {
	color:#373737;
	text-decoration: none;
	font-weight:700;
}
.header-link:hover {
	opacity: .6;
}
.header-link-email {
	color:#373737;
	text-decoration: none;
	font-weight:400;
}
.header-link-email:hover {
	opacity: .6;
}
.header-font-email {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 16px;
}
.footer-font-email {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 14px;
}
.header-font {
	font-size: 20px;
}
.header-img {
	width:60%;
}
.header-img:hover {
	opacity: .6;
}

.flex-1 {
	
}
.flex-footer {
	width:2%;
	margin-left:25px;
	margin-right:25px;
	margin-bottom:50px;
}
.social-icons {
	display: flex;
	flex:1;
	align-items: center;
  	justify-content: center;
}

.opacity-60 {
	opacity:1;
}
.social-footer {
	width:100%;
}
.social-footer:hover {
	opacity:.5;
}
.col-2-header {
	display: flex;
	align-items: center;
}
.about-me {
}
.box-margin {
	margin-right:5%;
	margin-left:10%;
}
.about-img {
}
.flex-2 {
	flex:1;
}
.mrl-10 {
	margin-left:10%;
	margin-right:10%;
}

.hero {
	background-image: none;
	width:100%;
  background-position: right; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
	
}

.hero-coke {
	position: relative;
}
.hero-fba {
	position: relative;
}
.hero-timex {
	position: relative;
	background-image: url("images/timex-bg.jpg");
	width:100%;
  	background-position: center; /* Center the image */
  	background-repeat: no-repeat; /* Do not repeat the image */
 	background-size: cover;
}
.header-copy-coke {
	padding-top: 3.5%;
    padding-bottom: 3.5%;
    padding-bottom: 3.5%;
    /* margin-top: 5%; */
    /*margin-bottom: 5%;*/
	display: block;
	color: #000;
	z-index:2;
	text-align: left;
	position: relative;
	width:50%;
	margin:auto;
}
.flex-coke {
    width: 100%;
}
.head-copy-coke {
	font-size:35px;
	letter-spacing: 3px;
}
.head-copy-mit45 {
	font-size:35px;
	letter-spacing: 3px;
}
.header-sub-copy-coke {
	font-size:18px;
	line-height: 1.3;
	letter-spacing: 1px;
}
.header-copy {
	padding-top: 3%;
    padding-bottom: 3%;
    /* margin-top: 5%; */
    /*margin-bottom: 5%;*/
    margin-left: 10%;
    margin-right: 10%;
	color: #000000;
}
.black {
	color:#000;
}
.reel {
	text-align: center;
    font-size: 35px;
    font-weight: 400;
    background-color: #fff;
	margin-left:10%;
	margin-right:10%;
	text-align: left;
	color:#000;
	/*color:#fff;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;*/
}
/*.reel-flex {
	display: flex;
	flex:1;
	align-items: center;
  	justify-content: center;
}*/
.reel-flex {
	padding-bottom:5%;
	display: none;
}
.reel-h2 {
	font-weight: 800;
	font-size:72px;
	text-align: center;
	color:#000;
	letter-spacing: 5px;
    margin-top: 3%;
    margin-bottom: 3%;
}
.reel-sub-copy {
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 1.3;
	text-align: center;
}
.reel-head {
	font-weight: 400;
}

.learn {
	font-weight: 800;
	font-size:16px;
	color:#000;
}
.reel-margin {
	margin-left:1%;
	z-index:1;
}
.reel-marign-02 {
	z-index:2;
}
.lght-grey {
	color:#c4c4c4;
} 

.fs-35 {
	font-size:18px;
}
.fs-75 {
	font-size:75px;
}
.work-grid {
	display: flex;
	align-items: center;
  	justify-content: flex-start;
}
.img-box {
	position: relative;
	background-color: black;
	cursor: pointer;
}
.work-name {
	position: absolute;
	bottom:30%;
	width:100%;
	text-align: center;
	font-weight: 100;
	font-size: 28px;
	transform: translateY(50%)
}
.about-work {
	position: absolute;
	bottom:2%;
	left:4%;
}
.work-p {
	font-size: 50px;
    font-weight: 700;
    letter-spacing: 1px;
	padding-bottom: 3%;
}
.work-square {
	cursor: pointer;
	flex:1;
}

.fw-500 {
	font-weight:500;
}
.fw-200 {
	font-weight: 200;
}
.fs-32 {
	font-size:32px;
}
.fs-60 {
	font-size:60px;
}
.project-explainer {
	margin-left:10%;
	margin-right:10%;
	margin-top:3%;
}
/*.video-ds {
	  box-shadow: 50px 50px 50px #c2c2c2; 
}*/
.reel-header {
	padding-top:25px;
	padding-bottom:25px;
}
.logos-header {
	color:#000;
	text-align: center;
	margin:0;
	padding-top:3%;
	font-size:35px;
}
.logos-grid {
	background-color: #fff;
}.footer {
	background-color: #000;
}
.footer-img {
	margin:auto;
	padding-top:5%;
}
.footer-name {
	text-align: center;
	font-size:24px;
	font-weight: 400;
}
.white {
	color:#EFEFEF;
}

.center {
	text-align: center;
}
.m-auto {
	margin:auto;
}
.m-0 {
	margin:0;
}
.mb-0 {
	margin-bottom:0;
}
.mb-25px {
	margin-bottom:25px;
}
.pb-25px {
	padding-bottom:25px;
}
.pb-5 {
	padding-bottom:2%;
}
.mt-15px {
	margin-top:15px;
}
.mr-5 {
	margin-right:2.5%;
}
.ml-5 {
	margin-left:2.5%;
}

.copyright-p {
	color:#7B7B7B;
	font-size: 12px;
	text-align: center;
}
.footer-link {
	color:#fff;
	text-decoration: none;
	opacity:1;
}
.footer-link:hover {
	opacity:.5;
}
.footer-logo {
	width:10%;
	opacity:1;
}
.footer-logo:hover {
	opacity:.5;
}
.coke-work {
	width:65%;
	margin:auto;
}
.video-100 {
	width:100%;
	display: block;
}
.mt-5 {
	margin-top:5%;
}
.mt-1 {
	margin-top:1%;
}
.mb-5 {
	margin-bottom:5%;
}
.mb-5-mobile-0 {
	margin-bottom:5%;
}
/*.work-name {
	 opacity: 0;
	-webkit-transition: all 400ms ease-out;
        -moz-transition: all 400ms ease-out;
        -o-transition: all 400ms ease-out;
        -ms-transition: all 400ms ease-out;
        transition: all 400ms ease-out;
        text-align: center;
}
.img-box:hover .work-name {
  opacity: 1;
}
.img-box .work-name .work-p {
        height: 0;
        opacity: 1;
        transition-delay: 0s;
        transition-duration: 0.4s;
      }
 .img-box:hover .work-name .work-p {
        opacity: 1;
        transform: translateY(250px);
        -webkit-transform: translateY(250px);
      }*/
.work-name {
	opacity:0;
}
.work-img:hover {
	opacity:.5;
	 -webkit-transition: all 400ms ease-out;
        -moz-transition: all 400ms ease-out;
        -o-transition: all 400ms ease-out;
        -ms-transition: all 400ms ease-out;
        transition: all 400ms ease-out;
}
.img-box:hover .work-name {
	cursor: pointer;
	opacity:1;
	transform: translateY(-50%);
	-webkit-  transform: translateY(-20%);
	 -webkit-transition: all 400ms ease-out;
     -moz-transition: all 400ms ease-out;
     -o-transition: all 400ms ease-out;
     -ms-transition: all 400ms ease-out;
     transition: all 400ms ease-out;
}

.work-name:hover .work-img {
	opacity:.5;
}
.noHover{
    pointer-events: none;
}
.learn:hover .work-img{
	opacity:.5;
}
.about-work {
	opacity:1;
}
.img-box:hover .about-work {
	opacity:0;
	-webkit-transition: all 200ms ease-out;
     -moz-transition: all 200ms ease-out;
     -o-transition: all 200ms ease-out;
     -ms-transition: all 200ms ease-out;
     transition: all 200ms ease-out;
}
.header-video-coke {
	 position: absolute;
  top: 0;
  left: 0;
	z-index:1;
	width:100%;
	display: block;
}
.header-video-coke-2 {
	 position: relative;
	width:100%;
	display: block;
}
.coke-flex {
	position: relative;
	display: flex;
	align-content: flex-start;
	justify-content: center;
}
.timex-flex {
	display:block;
	
}
.timex-image {
	width:100%;
}
.desktop {
	display:block;
}
.mobile {
	display:none;
}
.m-0-mb-5 {
	margin:0;
	margin-bottom:5%;
}

@media screen and (max-width: 1024px) {
	.work-name {
	opacity:1;
	font-weight: 700;
	font-size: 24px;
	text-align: center;
	bottom:50%;
	transform: translateY(50%)
		
}
	.a-work {
		opacity:1;
	}
	.work-p {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0;
}
	.learn {
	font-weight: 400;
	font-size:18px;
	color:#000;
}
	.work-img {
		opacity:.8;
	}
	h1 {
		font-size:20px;
		margin-right:5%;
	}
	.fs-35 {
    font-size: 14px;
}
	.header-copy {
    margin-right: 5%;
	margin-left:5%;
}
	.work-grid {
	display: block;
}
	.work-img{
	opacity:.5;
}
	.coke-work {
    width: 90%;
}
	.w-65 {
		width:90%;
	}
	.ml-100px {
		margin-left:15px;
	}
	.mobile-no {
		display:none;
	}
	.desktop {
	display:none;
}
	.mobile {
	display:block;
}
	.m-0 {
		margin:0;
	}
}
@media (max-width: 1270px) {
	.header-copy-coke {
	}
	.head-copy-coke {
    font-size: 40px;
}
		.head-copy-mit45 {
    font-size: 40px;
}
}
@media (max-width: 1030px) {
	.header-copy-coke {
	}
	.head-copy-coke {
    font-size: 30px;
}
		.head-copy-mit45 {
    font-size: 30px;
	letter-spacing: 0px;
}
	.header-sub-copy-coke {
    font-size: 16px;
}
}
@media (max-width: 850px) {
	.header-copy-coke {
		width:100%;
	}
	.head-copy-coke {
    font-size: 30px;
}
		.head-copy-mit45 {
    font-size: 24px;
			letter-spacing: 0px;
}

	.header-sub-copy-coke {
    font-size: 16px;
}
	.header-video-coke {
	display: none;
}
	.header-font-email {
    font-size: 12px;
}
	.header-body {
    margin-left: 0;
    margin-right: 0;
}
	.header-font {
    font-size: 14px;
}
	.flex-coke {
	margin: auto;
    width: 85%;
}
	.flex-footer {
    width: 5%;
}
	.footer-logo {
    width: 25%;
}
	.header-sub-copy-coke {
	    font-size: 16px;
    	line-height: normal;
    	letter-spacing: normal;
}
.header-left {
    width:100%;
	margin-left:5%;
}
.header-img {
    width: 70%;
}
.w-10 {
	width:50%;
}
	.reel {
		margin-left:0;
		margin-right:0;
	}
	.mb-5-mobile-0 {
	margin-bottom:0%;
}
	.center {
		text-align: center;
	}
	.m-0-mb-5 {
	margin:5%;
		font-size:16px;
}
	.footer-link {
		margin:5%;
	}
	.footer-img {
		padding-bottom:1%;
	}
	.social-icons {
		padding-top:2%;
	}
}