/*
Theme Name: Jessie Gontko Portfolio
Theme URI: jgontko.com
Description: Jessie Gontko Portfolio
Version: 1.1
Author: Jessie Gontko
*/

/* --------------------------------------------------------------------------------------------------------------------------*/
/* -----------------------------------------------------  RESET  ------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  background: transparent; 
}

body, html{
    width: 100%;
    height: 100%;
}

.root{
    overflow-x: hidden;
}
/*
html{
    overflow-x:hidden;  
}
*/

/* --------------------------------------------------------------------------------------------------------------------------*/
/* --------------------------------------------  IMPORT FONTS  --------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------------------*/


/*--- GOOGLE FONTS ---*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');


/*--- ICOMOON FONT ---*/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?foavrr');
  src:  url('fonts/icomoon.eot?foavrr#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?foavrr') format('truetype'),
    url('fonts/icomoon.woff?foavrr') format('woff'),
    url('fonts/icomoon.svg?foavrr#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-instagram-icon-filled-01:before {
  content: "\e900";
}
.icon-spotify:before {
  content: "\ea94";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-linkedin:before {
  content: "\eac9";
}
.icon-backward2:before {
  content: "\ea1f";
}
.icon-forward3:before {
  content: "\ea20";
}
.icon-eject:before {
  content: "\ea25";
}

/* --------------------------------------------------------------------------------------------------------------------------*/
/* --------------------------------------------  SASS ONLY COLOR PALLETE  ---------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------------------*/

$pale-red: rgb(250,124,122);
$pale-blue: rgb(145,190,250);

.gray{
    color: gray;
}


/* --------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------  MIXINS  -------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------------------*/

@mixin cover(){
   -webkit-background-size:cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   background-size:cover;
}
@mixin big(){
   font-family: 'Montserrat', sans-serif;
}
@mixin anime($time, $cubic){
   -webkit-transition: all $time $cubic;
   -moz-transition: all $time $cubic;
   -o-transition: all $time $cubic;
   transition: all $time $cubic;
}
@mixin center(){
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

@keyframes changeColor {
  0% {
    color: yellow;
  }
  50% {
    color: orange;
  }
  100% {
    color: red;
  }
}

@keyframes changeBgColor {
  0% {
    background-color: yellow;
    border: 1px solid yellow;
  }
  50% {
    background-color: orange;
    border: 1px solid orange;
  }
  100% {
    background-color: red;
    border: 1px solid red;
  }
}

/* --------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------  FONTS  --------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------------------*/


h1{
    font-family: "Dosis";
    font-weight: bolder;
    font-size: 4.5em;
    letter-spacing: 0.06em;
}

h2{
	font-family:"Dosis";
    font-weight: 200;
    font-size: 2em;
    letter-spacing: .08em;
}

h3{
	font-family:"Antic";
	font-weight:500;
	font-size: 1em;
	color:#CCC;
	letter-spacing:1px;
}

h3 strong{
  font-family: "Dosis";
  font-weight: 600;
  font-size: 1.2em;
  color: rgb(165,150,170);
  letter-spacing: 0.16em;
}

h4{
    font-family: "Open Sans";
    font-weight: 400;
    letter-spacing: 0.035em;
    line-height: 1.5em;
    font-size: 75%;
    color: rgb(100, 100, 100);
}

h5{
    font-family: "Open Sans";
    font-weight: 500;
    letter-spacing: 0.035em;
    line-height: 1.5em;
    font-size: 100%;
    color: rgb(146,146,146);
}
h5 a{
	text-decoration:none;
	z-index:2;
    color:rgb(250,124,122);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

h5 a:hover{
	color:rgb(145,190,250);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

.h5-body{
    font-size: 1.2em;
    font-weight: 100;
    color: white;
    font-family: sans-serif;
    line-height: 1.5;
    color: #eeee;
/*    text-align: left;*/
}


/*--------- NAV -----------*/
/*--------- NAV -----------*/
/*--------- NAV -----------*/
input {
  display: none;
}

#navmenuArea{
    position: relative;
    z-index: 3;
}

.open {
  background-color: #ffffff;
  width: 30px;
  height: 3px;
  display: block;
  cursor: pointer;
  position: relative;
  top: 8px;
}

.open:before {
  content: "";
  background-color: #ffffff;
  width: 30px;
  height: 3px;
  display: block;
  position: relative;
  top: -8px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.open:after {
  content: "";
  background-color: #ffffff;
  width: 30px;
  height: 3px;
  display: block;
  position: relative;
  top: 4px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.navmenuOpen {
  width: 24px;
  height: 20px;
  display: block;
  padding: 15px;
  cursor: pointer;
  float: right;
  margin-right:4.9vw;
}

.navmenuOpen:hover .open:before {
  top: -9px;
}

.navmenuOpen:hover .open:after {
  top: 5px;
}

.navmenu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(244, 67, 76, 0.9);
}

.navmenu label {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-size: 100%;
  cursor: pointer;
}

.navmenu .navmenuContent {
  position: relative;
  top: 50%;
  font-size: 54px;
  text-align: center;
  padding-bottom: 20px;
  margin-top: -140px;
}

.navmenu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.navmenu ul li a {
  display: block;
  color: white;
  text-decoration: none;
  transition: color 0.2s;
  font-family: 'Dosis', sans-serif;
  text-transform: uppercase;
  padding: 10px 0;
}

.navmenu ul li a:hover {
  color: rgba(244, 67, 76);
}

.navmenu ul li:hover {
  background: white;
}

.navmenuEffects {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.navmenuEffects ul {
  transform: translateY(0%);
  transition: all 0.3s;
}

#navmenuToggle:checked ~ .navmenuEffects {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s;
}

#navmenuToggle:checked ~ .navmenuEffects ul {
  opacity: 1;
}

#navmenuToggle:checked ~ .navmenuOpen .open {
  background-color: transparent;
}

#navmenuToggle:checked ~ .navmenuOpen .open:before {
  content: "";
  background-color: white;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#navmenuToggle:checked ~ .navmenuOpen .open:after {
  content: "";
  background-color: white;
  transform: rotate(-45deg);
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
}

#navmenuToggle:not(:checked) ~ .navmenuEffects ul {
  transform: translateY(-30%);
}
/*-------- NAV END ---------*/
/*-------- NAV END ---------*/
/*-------- NAV END ---------*/




body{
    background-color: #000000;
}

header{
	z-index:1;
}

#header-container{
	position:fixed;
	height: 66px;
	width:100%;
	z-index:6;
    display: none;
}

.container{
	position:relative;
	margin: 0px auto;
	width:1100px;
	z-index:3;
	overflow:hidden;
}

#header-container .container{
    overflow: visible;
    height: 75px;
}

.menu{
	display:block;
	position:absolute;	
	z-index:2;
	top:0px;
	right:0px;
}

.menu li{
	margin-left:8px;
	float:left;
	width:66px;
	height:66px;
	opacity:0.9;
	text-align:center;
}

.menu li:hover{
	background-image:url('images/flash-back.gif');
	cursor:pointer;
}

.menu-navigation-container li a, .menu li a{
    font-family:"Dosis";

	color:#FFF;
	text-decoration:none;
	width:100%;
	line-height: 66px;
    display: inline-block;
    font-size: 1.2em;
    letter-spacing: 0.03em;
}

.menu-navigation-container li a:hover,  .menu li a:hover{
	color:#000;
}

#site-title{
	display:block;
	background-color:#FFF;
	border-bottom:2px #000000 solid;
	width:253px;
	height:100px;
}

#site-title:hover{
	background-image:url('images/flash-back.gif');
	background-repeat:repeat-x;
	background-position:bottom;
	background-size:1.5%;
	border-bottom:none;
}

#jg-title{
	height:100%;
	background-image:url('images/jg-fade.gif');
	background-size: 88px 54px;
	background-repeat:no-repeat;
	background-position:49.5% 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

#jg-title:hover{
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s; 
	background-image:url('images/jg-fade.gif');
}

#jg-title p{
	padding-top:70px;
	text-align:center;
	font-family:"Dosis";
    font-weight: 400;
	font-size: 1.07em;
    letter-spacing: 0.03em;
    color: rgb(135,135,155);
    text-transform: uppercase;
}

#site-title-sub{
	font-size:18px;
	position:absolute;
	left:105px; 
	top:65px;
}

.header-img-home{
	position:relative;
	top:0px;
	margin: 0px auto;
	width:100%;
	background-size: cover;
	background-position:center;
	height: 60vh;
}
.header-img-home.bio{
	height: 40vh;
}

#send-back{
    position: absolute;
    width: 100%;
    height: 100%;
}

.headline-container{
	position:relative;
/*	width:1128px;*/
/*	height:100%;*/
	margin:0px auto;
/*    background-color: #1627a2;*/
}

.headline-container video{
    width: 550px;
    margin-top: 66px;
    float: right;
}





/*---------------------------------------------------------------------------*/
/*---------------------- HEADER.PHP DOCUMENT LINKS  -------------------------*/
/*---------------------------------------------------------------------------*/


/*VIDEO HEADER START*/
        #page-content{
            display: block;
            position: relative;
            top: 0;
            left: 0;
            height: 100%;
            overflow-x: hidden;
        }
        #main-background-wrapper{
            position: fixed;
            top: 0;
            left: 0;
            max-height: 100vh;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }
        #reception-video{
            position: absolute;
            width: 108%;
            height: 92%;
            left: -1vw;
            -o-object-position: center;
            object-position: center;
            -o-object-fit: cover;
            object-fit: cover;
            opacity: 1;
        }
        #header-gradient {
            position: absolute;
            z-index: 1;
            bottom: 0;
            height: 55vh;
            width: 100%;
            background: linear-gradient(transparent, #000000 45%, #000000);
        }
        .header-img-home img{
            position:relative;
            width:100%;
/*            left:-11vw;*/
            top:11vh;
        }


.document-links{
	font-family:"Antic";
	font-size:18px;
}

.single-wrap{
	position:relative;
	width:1180px;
    height: 100%;
	margin: 0px auto;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

.single-wrap div a{
/*    color: rgb(250,124,122);*/
    text-decoration: none;
}

.single-wrap div a:hover{
	color:#F00;
}

.single-wrap #link-cv{
	position:absolute;
	float:left;
    margin-top: 15px;
}
.single-wrap #link-letters{
  position: absolute;
  float: left;
  left: 220px;
  margin-top: 15px;
}
.single-wrap #link-dbollman{
	position:absolute;
	float:left;
	left:375px;
    margin-top: 15px;
}
.single-wrap #link-rboatright{
	position:absolute;
	float:left;
	left:555px;	
    margin-top: 15px;
}
.link-show-hide{
	font-size:14px;
	display:none;
}
#link-dbollman:hover .link-show-hide, #link-rboatright:hover .link-show-hide{
	display:block;
}

/* -------------------------------------------------------------- FEATURED PROJECTS*/


.featured-post{
    display: flex;
}

.featured-post a.feat-alpha{
    float: right;
    width: 45vw;
}
a.feat-alpha h3{
    font-size: 1.3em;
    margin-top: 18px;
    font-weight: 700;
}
a.feat-alpha h5{
    margin-top: 3px;
}

.content-wrapper.feat a:hover, .content-wrapper.feat a:visited, .content-wrapper.feat a:link, .content-wrapper.feat a:active{
    text-decoration: none !important;
}

a.feat-alpha:hover > h3{
    color: white;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

.featured-post:not(:first-of-type){
    margin-top: 100px;
}
.featured-post .sixty{
    float: left;
    width: 55%;
    height: 410px;
}

.featured-post .foxy{
    position: absolute;
    width: 100%;
	bottom:0;
	overflow:hidden;
}

.case img{
    width: 100%;
    height: auto;
}

.featured-post .ace{
        background-color:aqua;
}
.featured-post .beta{
        background-color:hotpink;
}
.featured-post .theta{
        background-color:purple;
}

.featured-post .sixty a{
    text-decoration: none;

    font-family: "Dosis";
    font-weight: 200;
    font-size: 1.75em;
    letter-spacing: .08em;
    color:white;
}

.img-cont{
    position:relative;
    width:100%;
    height:410px;  
}

.featured-post img{
    width: 100%;
}

section.feat{
    margin-bottom: 200px;
}

@media (max-width: 1023px) {
    .featured-post{
        display: block;
    }
    .featured-post .sixty{
        display: contents;
        width: 100%;
    }
.featured-post a.feat-alpha {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------  INDEX.PHP  -------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------------------*/

#options, #options-single{
	width:100%;
}

.option-set-single{
    border-top: 2px solid white;
    padding: 0px 0 6px 0;
    width: 90%;
}


ul#filters {
/*
    overflow: hidden;
    width: 89%;
    margin: 0px auto;
    padding: 12px 0 12px 0;
    border-bottom: 2px solid white;
*/
 }

.content-wrapper{
    padding-top: 80px;
    position: relative;
    margin: 0px auto;
    width: 90%;
/*    width: 1526px;*/
/*    padding-left: 46px;*/
}

.attachment-thumbnail{
	float:left;
	margin-right: 8px;
	margin-top:20px;
}

.option-nav{
	width:40px;
	height:40px;
	background-color:#999;	
}

.nav-position{
	position:relative;
	float:right;
    margin-top: 7px;
}

.post-nav-btn{
	float:left;
    font-size: 15px;
	width:40px;
	line-height:40px;
    margin-left: 10px;
    text-align: center;
    color: white;
    cursor: pointer !important;
/*
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
*/
}
.post-nav-btn span{
    display: inline-block;
}

.post-nav-btn:hover{
	color:#000 !important;
	background-image:url('images/flash-back.gif');
}

.btn-shift{
    position: relative;
    top: 3px;
    right: 1px;
    font-size: 18px;
}

#google_translate_element .goog-te-gadget img{
    display: none !important;
}
#google_translate_element{
    position: relative;
    float: left;
    margin-top: 16px;
}
.goog-te-gadget{
    color: white !important;
}
.goog-te-gadget-simple{
    background-color: black !important;
     border-left: none !important;
     border-top: none !important;
     border-bottom: none !important;
     border-right: none !important;
}
.goog-te-gadget-simple .goog-te-menu-value{
    color: white !important;
}
.goog-te-gadget-simple span a span{
    margin-right: 3px !important;
    border-left: none !important;
    color: white !important;
}

/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------- FRONT PAGE GALLERY ----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------*/
/*------------------------  Photo Gallery ---------------------------*/

/*--OPTION SET/THUMBNAIL CSS RESET--*/
ol, ul {
	list-style: none; }

/*--OPTION SET POSITION--*/
ul#filters li {
	float: left;
	margin: 0 0 15px 0;
}


/*--- THUMBNAIL HOVER ---*/

.portfolio-hover {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
	padding-right:1px;
    padding-top: 1px;
    background-image:url('images/flash-back-slow.gif');
    opacity: 0;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -ms-filter:"alpha(opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
}

.portfolio-hover:hover{
	opacity:0.9;
}

.portfolio-hover .hover-category{
    font-size: 0.75em;
    font-weight: 300;
    color: #fff;
    padding-top: 10px;
    text-indent: 10px;
}

.portfolio-hover-text{
    position: absolute;
	width:95%;
	top:30%;
    text-align: center;
	font-family:'Dosis';
	font-size:1.4em;
	font-weight:600;
	color:#000;
}

.hover-title, .hover-category{
	margin:0px auto;
}

.hover-title{
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

/*---  Filter Nav ---*/


.option-set, .option-set-single{
    position: relative;
    overflow: hidden;
    width: 89%;
    margin: 0px auto;
    padding: 12px 0 12px 0;
    border-bottom: 2px solid white;
  }
.option-set-single{
    padding: 0 0 6px 0;
}


#options .option-set li, #options-single .option-set-single li{
	margin: 0px auto;
	width: auto;
    margin-left: 18px;
    cursor: pointer;
}


#options #filters li .selected, #options-single #filters li .selected{
	font-family:"Dosis";
	color:black;
    background-color: white;
    border: 1px solid white;
}


ul#filters li a {
    display: block;
	padding: 4px 22px;
    text-decoration: none;
    font-family: 'Dosis', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 110%;
    text-align: center;
/*    color: #ffffff;*/
    color: white;
    cursor: pointer !important;
    border: 1px solid transparent;
    border-radius: 20px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

ul#filters li a:hover {
    animation-name: changeBgColor;
    animation-iteration-count: infinite;
    animation-duration: 0.35s;
    color:black;
    border-radius: 20px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.5s;
    cursor: pointer !important;
}

ul#filters li a.selected:hover{
	color:black !important;
    background-color: white !important;
    border: 1px solid white !important;
    cursor: default !important;
    border-radius: 20px;
}

/*--OPTION SET--*/
#options .option-set li:not(:first-child), #options-single .option-set-single li:not(:first-child){
    margin-left: 15px;
}

#options .option-set li:first-child, #options-single .option-set-single li:first-child{
    margin-left: 0px;
}

/* thumb size control */
ul.photogal li {
/*  width: 22.3%;*/
    width: 23.3%;
    float: left;
    margin: 0.82%;
 }

ul.photogal li a {
    width: 100%;
    display: block;
    cursor: pointer;
}

ul.photogal li a img {
	display: block;
	max-width: 100%;
	height: auto;
	width: auto\9;
/* ie8 */
}


/*--.overlay{background-color:#0F0;width:100%;height:100%;}--*/

.postin-image img{
	width:50%;
	height:50%;
}

#site-title{
    display: none;
}


#site-title a{
	text-decoration:none;
}

/*---  Isotope Motion ---*/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s; }

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width; }

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity; }

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s; }


/*CV*/

.cv-content{
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 50px;
}
.cv-content h1.entry-title{
    color: rgb(250,124,122);
    margin-bottom: 32px;
}

.cv-content p{
  font-family: 'Open Sans';
  font-weight: 100;
  font-size: 1.05em;
  color: rgb(140,140,140);
  line-height: 1.8em;
  margin-top: 1em;
}

.cv-content h3{
    margin-top: 2em;
    margin-bottom: 1em;
}
.cv-content ul {
    margin-top: 1em;
    margin-bottom: 1.5em;
}
.cv-content li {
  font-family: 'Open Sans';
  font-weight: 400;
  color: rgb(150,150,150);
  line-height: 1.7em;
}
.cv-content li.strong {
  color: rgb(72, 72, 72);
}

.cv-content h4{
  font-weight: 600;
  color: rgb(100,100,100);
  padding: 12px 0 3px 0;
}

h5.title{
  font-size: 1.15em;
  font-weight: 400;
  font-family: 'Open Sans Semibold';
  color: rgb(149,160,190);
  padding: 0 0 2px 0;
  letter-spacing: 0.02em;
}

.cv-content h5 span{
    margin-left: 24px;   
}


/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------ ENTRY.PHP  ----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/

/*ENTRY HEADER*/
.page-header{
    position: relative;
    width: 100vw;
    height: 100vh;
}

.section-parallax{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.parallax-content{
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    width: 100%;
    height: 120%;
}

/*PER PROJECT*/
.header-shavetopia{
    background-image:url('images/header-norelco-2800x1573.jpg');
}
.header-bluegrass{
    background-image:url('images/header-bluegrass-2800x1573.jpg');
}
.header-lab{
    background-image:url('images/header-lab-2800x1573.jpg');
}
.header-webex{
    background-image:url('images/header-webex-2800x1573.jpg');
}
.header-sonicare{
    background-image:url('images/header-sonicare-2800x1573.jpg');
}
.header-abbvie{
    background-image:url('images/header-abbvie-2800x1573.jpg');
}
.header-monarch{
    background-image:url('images/header-monarch-2800x1573.jpg');
}
.header-blackbird{
    background-image:url('images/header-blackbird-2800x1573.jpg');
}
.header-oculus{
    background-image:url('images/header-oculus-2800x1573.jpg');
}
.header-farout{
    background-image:url('images/header-farout-2800x1573.jpg');
}
.header-fim{
    background-image:url('images/header-fim-2800x1573.jpg');
}
.header-hardrock{
    background-image:url('images/header-hardrock-2800x1573.jpg');
}
.header-callmeout{
    background-image:url('images/header-chevycallmeout-2800x1573.jpg');
}
.header-unlocked{
    background-image:url('images/header-unlocked-2800x1573.jpg');
}
.header-whiskeydisco{
    background-image:url('images/header-whiskeydisco-2800x1573.jpg');
}
.header-newyear{
    background-image:url('images/header-newyears-2800x1573.jpg');
}
.header-mrmpurple{
    background-image:url('images/header-mrmpurple-2800x1573.jpg');
}
.header-hacklab{
    background-image:url('images/header-hacklab-2800x1573.jpg');
}
.header-boomba{
    background-image:url('images/header-boomba-2800x1573.jpg');
}
.header-chevroletfc{
    background-image:url('images/header-chevroletfc-2800x1573.jpg');
}
.header-lookingup{
    background-image:url('images/header-lookingup-2800x1573.jpg');
}
.header-falcon{
    background-image:url('images/header-falcon-2800x1573.jpg');
}
.header-testdrive{
    background-image:url('images/header-testdrive-2800x1573.jpg');
}
.header-bittorrent{
    background-image:url('images/header-bittorrent-2800x1573.jpg');
}
.header-ram{
    background-image:url('images/header-ram-2800x1573.jpg');
}
.header-ally{
    background-image:url('images/header-ally-2800x1573.jpg');
}




/*FEATURED PROJECT - UNLOCKED*/
.intro-headline{
    width:45%;
    margin-left:46%;                        
}
.intro-headline h5{
    font-size:1.3em;
    color:#eeeeee;
    text-align: left;
    color: rgb(146,146,146);
}
.entry-visuals .intro-headline h1{
    text-align:left;
    font-size:4em;
    margin-top:15px;
    font-weight:100;
    text-align:left;
    max-width:670px;
}
.featured-intro div:first-of-type img{
    width:30px;
    height:30px;
    margin-top:30px;
    margin-bottom:80px;
    margin-left:49%;
}
.featured-intro div:last-of-type img{
    display:flex;
    justify-content:center;
}
.featured-intro div:last-of-type{
    text-align: center;
}
.featured-intro div:last-of-type p{
    color:white;
    display:inline-block;
    width:80%;
    font-family:sans-serif;
    line-height:1.5;
    color: #eeee;
    border-bottom: 1px solid;
    border-bottom-color: rgba(255,255,255,1);
    padding-bottom:100px;
    text-align: left;
}


/*FEATURED PROJECT - PHILIPS NORELCO SHAVETOPIA*/

.stat-segment{
    margin-top:100px;
    width: 100%;
}
.stat-segment div{
    width:33%;
    float: left;
}
.stat-segment div .column_1_3{
    padding-bottom: 100px;
}
.stat-segment div h1{
    text-align: center;
    margin: 0 0 10px 0;
    color: white;
    width:100%;
}
.stat-segment div p{
    color: white;
    display: inline-block;
    width: 100%;
    font-family: sans-serif;
    line-height: 1.5;
    color: #eeee;
    padding-bottom: 100px;
    text-align: center;
    font-size: 1.4em;
}


.story-segments{
    margin-top:100px;
}

.story-segments div:first-of-type h4{
    font-family: 'Dosis';
    color: white;
    font-size: 2.5em;
}

.story-segments h4, .episodes h4{
    margin-bottom: 30px;
}

.story-segments .narrow-segment{
    width:50%;
    margin-left:25%;
    margin-top: 80px;
}

.story-segments .narrow-segment div{
    margin-bottom:80px;
}

.story-segments .narrow-segment div video{
    width:100%;
    padding-bottom:10px;
}
.story-segments .narrow-segment div h5:first-of-type{
    float:left;
    color:white;
    padding-right:15px;
    font-weight:700;
    font-family:sans-serif;
    font-size: 1.3em;
}
.story-segments .narrow-segment div h5:last-of-type{
    color:white;
    font-size: 1.3em;
    font-weight: 100;
}

.case-title-block{
    width: 80%;
    margin-left:10%;
    margin-bottom:60px;
}
a.jump-link{
    color: white;
    font-weight: 500;
    line-height:2;
    text-decoration: none;
}

.case-title-block h4{
    font-family: 'Dosis';
    color: white;
    font-size: 2.5em;
}

.globe-container video{
    position:absolute;
    top:0px;
    width:110%;
    margin-left:-9%;
}
.world{
    width:100%;
    text-align:center;
}
.vert-line{
    display: inline;
    height:20vh;
    width:100%;
}
.vert-line div{
    width: 50%;
    height: 20vh;
    border-right: 1px solid white;
    opacity: .6;
    margin-top: 10vh;
    margin-bottom: 10vh;
}

.markets{
    display:inline-block;
    width:100%;
}

.markets div:first-of-type h4{
    font-family: 'Dosis';
    color: white;
    font-size: 2.5em;
}
.country{
    margin-bottom:25px;
}

.country img{
    width: 100%;
    max-height: 55px
}
.country h5{
    text-align: center;
    margin-bottom: 5px;
}
.world img{
    position:absolute;
    width:80%;
    top:8%;
    transform: translate(-50%, 2%);
    max-width:748px;
}
.center-column{
    position:relative;
    width:76%;
    height:465px;
    margin-left: 2%;
    float:left;
    overflow:hidden;
}
#world-flags #left-column{
    margin-top:14px;
    width:10%;
    float:left;
}
#world-flags #right-column{
    width:10%;
    float:right;
    margin-top:14px;
}
.episodes{
    display:inline-block;
    width:100%;
}
.episodes video{
    width: 100%;
}
.episodes a{
float: right;
    font-size: 1.3em;
    font-family: arial;
    color: #ffffff;
    text-decoration: none;
    margin-top: 10px;
    padding-bottom: 5px;
    text-align: right;
    margin-right: 30px;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
}

.episodes.stack img{
    margin-bottom: 50px;
}
.center-header{
    margin-top:10px;
    width: 80%;
    margin-left:10%;
    margin-bottom:60px;
    text-align:center;
}
.center-header h5:first-of-type{
    color:white;
    padding-right:15px;
    font-weight:700;
    font-family:sans-serif;font-size: 1.3em;
}
.center-header h5:last-of-type{
    color:rgb(146,146,146);
    font-size: 1.3em;
    font-weight: 100;
    color:eeeeee;
}
.episodes .video-container{
    margin-bottom:160px;
}


/*FEATURED PROJECT - FUTURE IS MINE*/
#festivals{
    text-align: center;
    width: 80%;
    margin-left:10%;
}
#festivals img{
    width:19%;
    height:auto;
    opacity: 0.8;
}
#post-299 .episodes .case-title-block {
    margin-bottom: 80px;
}
#post-299 .episodes .video-container {
    margin-bottom: 100px;
}

/*---------------------------------*/
/*---------------------------------*/
/*------------BIOI PAGE------------*/
/*---------------------------------*/
/*---------------------------------*/

#bio-pic{
    float: left;
    margin-right: 5%;
    margin-left: 5%;
    width: 28%;
}
.bio-text{
    color:white;
    font-size:24px;
    text-align:left;
    font-family:'Dosis';
    margin:0 auto;
    width:55%;
    display:flex;
}


/*---------------------------------*/
/*---------------------------------*/
/*-----------RESPONSIVE------------*/
/*---------------------------------*/
/*---------------------------------*/

@media (max-width: 1023px) {
    .intro-headline {
        width: 57%;
        margin-left: 33%;
    }
    #bio-pic{
        float: none;
        display: block;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 65px;
    }
    .bio-text{
        width:100%;
    }
}
@media (max-width: 812px){
    .globe-container video {
        width: 700px;
    }
    .center-column{
        height:332px;
    }
    .world img{
        top:15%;
    }
    #world-flags #right-column, #world-flags #left-column {
     margin-top: 0px; 
    }
}


@media (max-width: 750px) {
    .intro-headline {
        width: 80%;
        margin-left: 10%;
    }
    .featured-intro div:first-of-type img {
        margin-left: 10%;
    }
    #world-flags #right-column, #world-flags #left-column {
        width: 80%;
        margin-left:10%;
        float:left;
    }
    #world-flags #right-column{
        margin-top:32px;
    }
    .country{
        float:left;
        width:25%;
    }
    .country img {
        width: 80%;
        padding-left: 10%;
    }
    .center-column{
        margin-left: 10%;
        width: 80%;
    }
}

@media (max-width: 375px) {
    

    
}



/*HEADLINE TEXT*/
.entry-headline{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
}



/*BEGIN ENTRY CONTENT SECTION*/
.entry-content{
	position:relative;
	width:100%;
    margin-top: 50px;
/*    border-top: white 5px solid;*/
    padding-top: 25px;
}


.entry-description{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 60px;
    margin-bottom: 50px;
}
h2.entry-header{
    color: white;
}
.entry-header-left{
    float: left;
    width: 25%;
    margin-right: 20px;
}
.entry-header-right{
    width: 45%;
}

.entry-text h5{
    margin-top: 10px;
    margin-bottom: 24px;
}
.entry-text h5 a{
    color: rgb(250,124,122);
    text-decoration: none;   
}



/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------- WORK SAMPLES ----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/



/*GLOBAL*/


/*GLOBAL IMAGE STYLE*/
.entry-image{
    width: 100%;
    padding-bottom: 67%;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-bottom: 60px;
}

/*GLOBAL VIDEO STYLE*/
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
/*    padding-top: 30px;*/
    height: 0;
    overflow: hidden;
    margin-bottom: 60px;
}

.entry-visuals h1{
    text-align:center;
    margin: 100px 0 60px 0;
    color:white;
}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube-bg{
	margin:0px auto;
	width:100%;
	height:450px;
/*	background-color:#F4F4F4;*/
}

.youtube-video{
	position:relative;
	margin:0px auto;
	width:100%;
	height:315px;
	top:70px;
}

.issuu-bg{
	margin:0px auto;
	width:auto;
	height:auto;
	background-color:#e6e6e6;
}
.issuuembed{
	width: 732px;
	height: 811px;
	margin:0px auto;
}

.img-caption{
	margin-bottom:84px;
}
.credits-caption{
	margin-top:32px;
}
.img-caption-issuu{
	margin-top:32px;
	margin-bottom:50px;
}


img.full-width-img{
    width: 100%;
}

/* PHIILIPS NORELCO */

.entry-image#norelco-razor-racer{
    background-image: url(/wp-content/uploads/norelco-roblox-razor-racer-gameplay.jpg);
    width: 100%;
    padding-bottom: 67%;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 40px 0 0 0;
}

.entry-image#norelco-blade-hunter{
    background-image: url(/wp-content/uploads/norelco-roblox-blade-hunter-gameplay.jpg);
    width: 100%;
    padding-bottom: 67%;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 40px 0 0 0;
}

.entry-image#norelco-stachery{
    background-image: url(/wp-content/uploads/norelco-roblox-stachery-gameplay.jpg);
    width: 100%;
    padding-bottom: 67%;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 40px 0 0 0;
}

.entry-image#norelco-portals{
    background-image: url(/wp-content/uploads/norelco-roblox-portal-gameplay.jpg);
    width: 100%;
    padding-bottom: 67%;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 40px 0 0 0;
}

/* SONICARE */

.entry-image#sonicare-oral-healthcare{
    background-image: url(/wp-content/uploads/sonicare-posts-oral-healthcare.jpg);
    width: 100%;
    padding-bottom: 67%;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 40px 0 0 0;
}
.entry-image#sonicare-style{
    background-image: url(/wp-content/uploads/sonicare-posts-style.jpg);
    width: 100%;
    padding-bottom: 67%;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 40px 0 0 0;
}
.entry-image#sonicare-moments-humor{
    background-image: url(/wp-content/uploads/sonicare-posts-moments-humor.jpg);
    width: 100%;
    padding-bottom: 67%;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 40px 0 0 0;
}

/* ABBVIE */

.entry-image#abbvie-tour{
    background-image: url(/wp-content/uploads/abbvie-tour.jpg);
    width: 100%;
    padding-bottom: 67%;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 40px 0 0 0;
}

/*HACK LAB*/

.entry-image#hacklab-case{
    background-image: url(/wp-content/uploads/case-hacklab.jpg);
    padding-bottom: 56%;
}
.entry-image#hacklab-case-collage{
    background-image: url(/wp-content/uploads/case-hacklab-collage.jpg);
    padding-bottom: 144%;
}

/*FAR OUT MAN*/

.entry-image#far-out-front{
    background-image: url(/wp-content/uploads/far-out-man-cover-front-1920x1280.jpg);
}
.entry-image#far-out-back{
    background-image: url('/wp-content/uploads/far-out-man-cover-back-1920x1280.jpg');
}


/*PROMASTER*/

.pmc-ola{
	width: 784px;
    height: 350px;
	background-size: contain;
    background-repeat: no-repeat;
    margin-top: 30px;
}
#pmc-1{
	background-image: url('/wp-content/uploads/pmc-ola-frame-1.jpg');
    padding-bottom: 39%;
}
#pmc-2{
	background-image: url('/wp-content/uploads/pmc-ola-frame-2.jpg');
    padding-bottom: 39%;
}
#pmc-3{
	background-image: url('/wp-content/uploads/pmc-ola-frame-3.jpg');
    padding-bottom: 39%;
}

#pmc-edirect{
    padding-bottom: 115%;
	background-image: url('/wp-content/uploads/pmc-edirect.jpg');
    background-size: 60%;
}


/*ALLY*/
.entry-image#case-ally{
    background-image: url(/wp-content/uploads/allyauto-case-study.jpg);
    padding-bottom: 579%;
}

.ally-landing-page{
	width: 784px;
    height: 905px;
	background-image: url('/wp-content/uploads/ally-landing-page.jpg');
	background-size: contain;
    background-repeat: no-repeat;
	margin-bottom: 7px;
}
.ally-email{
	width: 784px;
    height: 1019px;
	background-image: url('/wp-content/uploads/ally-email-invite.jpg');
	background-size: contain;
    background-repeat: no-repeat;
	margin-bottom: 7px;
}
.ally-desktop{
	width: 782px;
    height: 2986px;
	background-image: url('/wp-content/uploads/ally-landing-page-desktop.jpg');
	background-size: contain;
    background-repeat: no-repeat;
    border:solid 1px #cccccc;
	margin-bottom: 7px;
}
.ally-mobile{
	width: 360px;
    height: 4654px;
	background-image: url('/wp-content/uploads/ally-landing-page-mobile.jpg');
	background-size: contain;
    background-repeat: no-repeat;
    border:solid 1px #cccccc;
    margin: 0 auto;
	margin-bottom: 7px;
}
.ally-poster{
	width: 784px;
    height: 600px;
	background-image: url('/wp-content/uploads/ally-poster-mockup.jpg');
	background-size: contain;
    background-repeat: no-repeat;
	margin-bottom: 7px;
}


/*FALCON*/
.entry-image#case-falcon{
    background-image: url(/wp-content/uploads/case-falcon.jpg);
    padding-bottom: 224%;
}


/*ALLY*/
.case-ally{
	background-image:url('/wp-content/uploads/case-ally.jpg');
	background-size:contain;
    background-repeat: no-repeat;
	width:100%;
	height:4000px;
}

/*HACK LAB*/
.case-hacklab{
	background-image:url('/wp-content/uploads/case-hacklab.jpg');
	background-size:contain;
    background-repeat: no-repeat;
    background-color: #f4bc00;
	width:100%;
	height:442px;
}
.case-hacklab-collage{
	background-image:url('/wp-content/uploads/case-hacklab-collage.jpg');
	background-size:contain;
    background-repeat: no-repeat;
/*    background-color: #f4bc00;*/
	width:100%;
	height:1130px;
    margin-top: -4px;
}


/*LOOKING UP*/
.case-chevrolet-looking-up{
	background-image:url('/wp-content/uploads/case-lookingup.jpg');
	background-size:contain;
    background-repeat: no-repeat;
	width:100%;
	height:442px;
}

/*BLACKBIRD*/
.case-blackbird{
	background-image:url('/wp-content/uploads/case-blackbird.jpg');
	background-size:contain;
    background-repeat: no-repeat;
    background-color: #000000;
	width:100%;
	height:442px;
}

/*WHISKEY DISCO*/
.entry-image#whiskey-color-association{
	background-image: url('/wp-content/uploads/whiskey-disco-color-association.jpg');
}
.entry-image#whiskey-colors{
	background-image: url('/wp-content/uploads/whiskey-disco-colors.jpg');
}
.entry-image#whiskey-adaptive-colors{
	background-image: url('/wp-content/uploads/whiskey-disco-adaptive-color.jpg');
}
.entry-image#whiskey-poster-pink{
	background-image: url('/wp-content/uploads/whiskey-disco-poster-pink.jpg');
}
.entry-image#whiskey-poster-black{
	background-image: url('/wp-content/uploads/whiskey-disco-poster-black.jpg');
}
.entry-image#whiskey-poster-lines{
	background-image: url('/wp-content/uploads/whiskey-disco-poster-lines.jpg');
}
.entry-image#whiskey-google{
	background-image: url('/wp-content/uploads/whiskey-disco-google-map.jpg');
}


/*CHEVROLET FC*/
.entry-image#case-chevrolet-fc{
    background-image:url('/wp-content/uploads/case-chevrolet-fc.jpg');
}



/*351*/
.entry-image#case-351-1{
	background-image:url('/wp-content/uploads/351-lookbook-1-1000x562.jpg');
    padding-bottom: 54%;
}
.entry-image#case-351-2{
	background-image:url('/wp-content/uploads/351-lookbook-2-1000x562.jpg');
    padding-bottom: 54%;
}
.entry-image#case-351-3{
	background-image:url('/wp-content/uploads/351-lookbook-3-1000x562.jpg');
    padding-bottom: 54%;
}
.entry-image#case-351-4{
	background-image:url('/wp-content/uploads/351-lookbook-4-1000x562.jpg');
    padding-bottom: 54%;
}
.entry-image#case-351-5{
	background-image:url('/wp-content/uploads/351-lookbook-5-1000x562.jpg');
    padding-bottom: 54%;
}
.entry-image#case-351-6{
	background-image:url('/wp-content/uploads/351-lookbook-6-1000x562.jpg');
    padding-bottom: 54%;
}
/*
	background-size:contain;
    background-repeat: no-repeat;
*/
	width:100%;
/*	height:4090px;*/
}

/*BITTORRENT*/
.telly{
	margin-top:15px;
	width:225px;
	height:180px;
	background-image:url('/wp-content/uploads/telly-bronze.jpg');
	background-size:contain;
}





/*351 APPAREL */




/* ----------------------------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------- INDEX.PHP FOOTER --------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/

/*
.footer-high{
	float:left;
	margin-top:100px;
	width:100%;
	height:400px;
	background-color:#CCC;	
}

.footer-container-high{
	position:relative;
	margin: 0px auto;
	width:100%;
	background-image:url('images/footer.jpg');
	background-size: cover;
	background-position:center;
	opacity:1;
	height: 400px;
}
*/

#footer-right a{
    text-decoration: none !important;
}


span .footer-link{
    float: left;
}

.icon-twitter, .icon-instagram-icon-filled-01, .icon-spotify, .icon-linkedin{
    float: left;
    font-size: 125%;
    margin-right: 12%;
    cursor: pointer !important;
}
.icon-spotify{
    margin-right: 0;
}

.icon-twitter:hover, .icon-instagram-icon-filled-01:hover, .icon-spotify:hover, .icon-linkedin:hover{
    color:rgb(145,190,250);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    text-decoration: none !important;
    cursor: pointer !important;
}

                #navigationWrap {
                     display: none;
                     width: 100%;
/*                     min-height: 100vh;*/
                     height: 100%;
                     background: rgba(0,0,0,.85);
                     opacity: 0;
                     position: fixed;
                     top: 0;
                     padding: 50px 0;
                     overflow: hidden;
                     z-index: 9;
                }
                nav ul {
                     list-style-type: none;
                     padding: 0;
                }
                nav ul li {
                     color: white;
                     font-size: 12vh;
                     text-transform: uppercase;
                     overflow: hidden;
                     font-weight: 700;
                }
                nav ul li:first-child {
/*                     font-size: 8vh;*/
                     overflow: visible;
                }
                .menu-full nav a {
                     color: white;
                     -o-transition:.1s;
                     -ms-transition:.1s;
                     -moz-transition:.1s;
                     -webkit-transition:.1s;
                     transition:.1s;
                     text-decoration: none;
                    z-index: 11;
                    font-family: 'Dosis', sans-serif;
                    font-weight: 400;
                }
                .menu-full nav a:hover {
                    background-image:url('https://jgontko.com/wp-content/themes/jgontko/images/flash-back.gif');
                    color: black;
                    cursor:pointer;
                }
                .navbar {
                     position: fixed;
                     top: 20px;
                     left: 20px;
                     width: 45px;
                     height: 45px;
                     z-index: 20;
                     cursor: pointer;
                }
                .close {
                     display: none;
                     opacity: 0;
                     position: fixed;
                     top: 20px;
                     left: 20px;
                     width: 45px;
                     height: 45px;
                     z-index: 20;
                     cursor: pointer;
                }
                .social a {
                     color: #ffffff;
                     color: white;
                     -o-transition:.1s;
                     -ms-transition:.1s;
                     -moz-transition:.1s;
                     -webkit-transition:.1s;
                     transition:.1s;
                     text-decoration: none;
                }
                .social a:hover {
                     color:#F24738;
                }
                .fa {
                     color: #ffffff;
                     padding-right: 12px;
                     font-size: 1.8em !important;
                     -o-transition:.1s;
                     -ms-transition:.1s;
                     -moz-transition:.1s;
                     -webkit-transition:.1s;
                     transition:.1s;
                    cursor: pointer !important;
                }
                .fa:hover {
                    color:#F24738;
                    cursor: pointer !important;
                }

                
                .navbar .trigger {
                  width: 30px;
                  height: 30px;
                  position: absolute;
                  top: 30px;
                  right: auto;
                  bottom: auto;
                  left: 2px;
                  z-index: 3;
                  cursor: pointer;
                  transition: top 0.1s ease-in-out;
                }
                .navbar .trigger span {
                  display: block;
                  width: 100%;
                  height: 5px;
                  background: #F1F1F1;
                  margin: 0 0 5px 0;
                  transition: all 0.2s ease-in-out;
                  position: absolute;
                }
                .navbar .trigger span:first-child {
                  top: 0;
                  left: 0;
                }
                .navbar .trigger span:nth-child(2) {
                  top: 10px;
                  left: 0;
                }
                .navbar .trigger span:last-child {
                  top: 20px;
                  left: 0;
                }
                .navbar .trigger.on {
                  top: 40px;
                }
                .navbar .trigger.on span:first-child {
                  transform: rotate(45deg);
                }
                .navbar .trigger.on span:nth-child(2) {
                  transform: rotate(-45deg);
                  top: 0;
                }
                .navbar .trigger.on span:last-child {
                  transform: rotate(45deg);
                  top: 0;
                }
                .navbar:hover span{
                    background:#F24738;
/*                    cursor: pointer !important;*/
                }
                .menu-full{
                    margin-left: 10vw;
                    margin-top: 10vh;
                }
                .social .icon-twitter, .social .icon-instagram-icon-filled-01, .social .icon-spotify, .social .icon-linkedin {
                    font-size: 165%;
                    margin-right: 4%;
                    margin-top: 5vh;
                }
/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------- CONTACT.PHP ----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/

.thank-you-bg{
	position:absolute;
	top:0px;
	left:20px;
	width:1050px;
	height:104px;
	background-image:url('images/flash-back-slow.gif');
	background-size:contain;
	background-repeat:repeat;
}
.contact-info-left{
	width:auto;
	height:500px;
	float:left;
	margin-bottom:80px;	
}

.contact-twitter{
	position:relative;
	top:108px;
	left:103px;
	width:110px;
	height:110px;
	background-image:url('images/contact-twitter.jpg');
	background-position:center;
	background-size:contain;
}
.contact-linkedin{
	position:relative;
	left:300px;
	top:250px;
	width:110px;
	height:110px;
	background-image:url('images/contact-linkedin.jpg');
}
.conact-linkedin-text{
	position:relative;
	top:260px;
	left:293px;
	font-family:"Antic";
	font-size:25px;
	color:#808284;
}
.conact-twitter-text{
	position:relative;
	top:118px;
	left:109px;
	font-family:"Antic";
	font-size:25px;
	color:#808284;
}
.contact-info-right-alt{
	display:none;
}
.contact-info-right{
	position:relative;
	width:400px;
	height:500px;
	left:600px;
	top:180px;
	margin-bottom:80px;
	font-family:"Antic";
	font-size:22px;
	color:#808284;
}
.contact-email{
	position:relative;
	top:-3px;
}
.contact-email-icon{
	position:relative;
	top:32px;
	left:35px;
	width:48px;
	height:53px;
	background-image:url('images/contact-email.jpg');	
}
.contact-phone-icon{
	position:relative;
	top:34px;
	left:35px;
	width:48px;
	height:53px;
	background-image:url('images/contact-cell.jpg');	
}
.contact-mail-icon{
	position:relative;
	top:32px;
	left:35px;
	width:48px;
	height:53px;
	background-image:url('images/contact-castle.jpg');	
}
/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------- FOOTER.PHP -----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/


.footer-container{
	width:90%;
	margin:0px auto;
	color:#CCC;
}

.rule{
	background-color:white;
	height:1px;
	width:100%;
	margin-top: 10px;
	margin-bottom: 7px;
}
/* --- FOOTER MED ---*/

.footer-med{
	float:left;
	width:100%;
	height:132px;
    margin-top:90px;
}

#footer-right{
	width:18%;
	float:right;
}
#footer-left{
	width:74%;
	float:left;
}

.footer-link{
	color:white;
	text-decoration:none;
    cursor: pointer !important;
}

a.jump-link:hover, .footer-link:hover, .episodes a:hover {
    animation-name: changeColor;
    animation-iteration-count: infinite;
    animation-duration: 0.35s;
    text-decoration: none;
}

#twitter{
	width:36px;
	height:36px;
	background-image:url('images/twitter-icon.gif');
	background-size:cover;
	overflow:hidden;
	background-position:0px 0px;
	float:left;
	margin-right:10px;
}

#twitter:hover{
	width:36px;
	height:36px;
	background-image:url('images/twitter-icon.gif');
	overflow:hidden;
	background-position:0px 36px;
}

#linkedin{
	width:36px;
	height:36px;
	background-image:url('images/linkedin-icon.gif');
	background-size:cover;
	overflow:hidden;
	background-position:0px 0px;
}

#linkedin:hover{
	width:36px;
	height:36px;
	background-image:url('images/linkedin-icon.gif');
	overflow:hidden;
	background-position:0px 36px;
}

#castle{
	position:relative;
	width:32px;
	height:32px;
	background-image:url(images/castle-icon.png);
	background-size:cover;
	overflow:hidden;
	background-position:0px 0px;
	float:left;
	margin-right:12px;
}

#footer-left p{
	padding-top:10px;
}

#cell{
	position:relative;
	width:35px;
	height:35px;
	background-image:url(images/cell-icon.png);
	background-size:cover;
	overflow:hidden;
	background-position:0px 0px;
	float:left;
	margin-right:12px;
}

#location{
	height:35px;
/*	width:480px;*/
    width:210px;
	float:left;
	margin-right:15px;
}

#phone{
	height:32px;
}

/* --- FOOTER LOW ---*/

.footer-low{
	float:left;
	width:100%;
	height:32px;
	background-color:#101010;
}

#home { 
	background: url('images/home.jpg') 50% 0 no-repeat fixed; 
	height: 1000px;  
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#about { 
	background: url('images/about.jpg') 50% 0 no-repeat fixed; 
	height: 1000px;
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}



/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------- RESPONSIVE @ 1023PX >  ------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 1023px) {

	.header-img{
        background-size: 143%;
	}
	.entry-header{
		position:relative;
		float:left;
		margin-top:20px;
		margin-bottom:20px;
	}
	.entry-text{
		position: absolute;
		margin-top:20px;
		position:relative;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	.youtube-bg{
		margin:0px auto;
		width:870px;
		height:450px;
	}
	.issuu-bg{
		margin:0px auto;
		width:870px;
		height:795px;
		background-color:#F4F4F4;
	}
	.footer-container-high{
		background-image:url('images/footer-2.jpg');
	}
	
	/*--CONTACT--*/

	.thank-you-screen{
		left:20px;
		width:870px;
		height:86px;
	}
	.thank-you-bg{
		left:20px;
		width:870px;
		height:86px;
	}
	.contact-info-right{
		width:400px;
		height:500px;
		left:500px;
		top:180px;
	}
    
    
}


/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------- RESPONSIVE @ 812PX >  ------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 830px){
    
    #options{
        margin-top: 10vh;
    }

    .header-img-home img{
        top: 15vh;
    } 
    .header-img-home{
        height: 40vh;
    }
    .header-img-home.bio{
        height: 25vh;
        display: inline-block;
    }
    .content-wrapper {
        padding-top: 20px;
    }
    .content-wrapper.bio {
        margin-top:18vh;
    }
    #header-gradient {
    height: 72vh;
    }
}


/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------- RESPONSIVE @ 750PX >  ------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/


@media (max-width: 750px) {
    
    h1{
    font-size: 3em;
    }
    
    /*Nav Text*/
    ul#filters li a {
        font-size: 130%;
    }
    ul#filters li a {
        padding: 4px 15px;
    }
    /* thumb size control */
    ul.photogal li {
        width: 31.4%;
        margin: 0.9%;
     }
    /* thumb size control */
/*
    ul.photogal li {
        width: 47%;
        margin: 1%;
     }
    
*/
    .content-wrapper {
        width: 91%;
    }
    .content-wrapper.bio {
        margin-top:10vh;
    }
    
    
    /*---FOOTER---*/
    .footer-med{
        height:170px;
    }
    #footer-right h3, #footer-right .rule{
        display: none;
    }
    #footer-left, #footer-right{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #footer-right a:nth-child(-n+5) {
        width: 25%;
    }
    #footer-left{
        display: none;
    }
    .icon-twitter, .icon-instagram-icon-filled-01, .icon-linkedin{
        font-size: 245%;
        margin-right: 24.6%;
        margin-top: 40px;
    }
    .icon-spotify{
        font-size: 245%;
        margin-right: 0;
        margin-top: 40px;
    }
	.entry-left-column{
		width:630px;
		overflow:hidden;
		margin-bottom:100px;
	}
	.youtube-bg{
		margin:0px auto;
		width:600px;
		height:450px;
	}
	.issuuembed{
		width: 600px;
		height: 665px;
		margin:0px auto;
	}
	.issuu-bg{
		margin:0px auto;
		width:100%;
		height:665px;
		background-color:#F4F4F4;
	}
	.header-img{
        background-size: 133%;
        height: 142px;
	}
    
    /*ALLY*/
    .ally-landing-page{
        width: 600px;
        height: 693px;
    }
    .ally-email{
        width: 600px;
        height: 780px;
    }
    .ally-desktop{
        width: 600px;
        height: 2291px;
    }
    .ally-mobile{
        width: 360px;
        height: 4654px;
    }
    .ally-poster{
        width: 600px;
        height: 459px;
    }
 
	/*--CONTACT--*/

	.entry-content{
	overflow:hidden;	
	}
	.contact-info-right{
		display:none;
	}
	.contact-info-right-alt{
		display:inline;
		position:relative;
		width:400px;
		height:500px;
		left:250px;
		top:80px;
		font-family:"Antic";
		font-size:22px;
		color:#808284;
	}
	.contact-email{
		position:relative;
		top:-3px;
	}
	.contact-email, .contact-phone, .contact-mail{
		width:300px;	
	}
	.contact-info-right-alt .contact-email-icon{
		position:relative;
		top:32px;
		left:-80px;
		width:48px;
		height:53px;
		background-image:url('images/contact-email.jpg');	
	}
	.contact-info-right-alt .contact-phone-icon{
		position:relative;
		top:34px;
		left:-80px;
		width:48px;
		height:53px;
		background-image:url('images/contact-cell.jpg');	
	}
	.contact-info-right-alt .contact-mail-icon{
		position:relative;
		top:32px;
		left:-80px;
		width:48px;
		height:53px;
		background-image:url('images/contact-castle.jpg');	
	}
	.contact-info-left{
		display:inline;
		position:relative;
		top:-125px;
		left:57px;
		width:auto;
		height:150px;
		float:left;
		margin-bottom:190px;
	}
    
}

/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------- RESPONSIVE @ 376PX >  ------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 376px) {
    
    .navmenuOpen {
      margin-right:0;
    }

    ul#filters li a {
        padding: 4px 18px;
    }
        /* thumb size control */
    ul.photogal li {
        width: 47%;
        margin: 1%;
     }
    
    .header-img-home{
        height: 25vh;
        }

    .header-img-home img{
        top: 9vh;
        width: 140%;
        left: -19vw;
        }

    #reception-video.desktop{
        width: 108%;
        height: 92%;
        left: -1vw;
        top: -12vh;
        }
    #reception-video.mobile{
        width: 100%;
        height: 60%;
        left: 01vw;
        top: -12vh;
        }
    
    #header-gradient{
    height: 90vh;
    }
    
    #options .option-set li:nth-child(n+4){
        margin-top: 12px;
    }
    
    .option-set, .option-set-single{
        width: 100%;
    }
    #google_translate_element{
        margin-left:5%;
    }
    .nav-position{
        margin-right:5%;
    }
    .content-wrapper {
    width: 100%;
    }
    
    .intro-headline {
        width: 90%;
        margin-left: 5%;
    }
    .entry-headline h1{
        margin-left:10px;
    }
    .entry-visuals .intro-headline h1 {
        font-size: 2.7em;
        margin-bottom: 30px;
    }
        .entry-headline h1{
        margin-left:10px;
    }
    .featured-intro div:last-of-type p {
        width:90%;
    }
    
/*    FEATURED CASE STUDY*/
    .case-title-block {
        width: 90%;
        margin-left: 5%;
    }
    .story-segments .narrow-segment {
        width: 80%;
        margin-left: 10%;
    }
    #world-flags #right-column, #world-flags #left-column {
        width: 90%;
        margin-left: 5%;
    }
    .center-column {
        margin-left: 0;
        width: 100%;
        height:230px;
    }
    .world img {
        top: 12%;
        width:90%;
    }
    .featured-intro div:first-of-type img{
        margin-left:5%;
    }
    .episodes .case-title-block {
        margin-bottom: 100px;
    }
    .center-header {
        margin-top: 0;
        margin-bottom: 30px;
    }
    .episodes .video-container {
        margin-bottom: 100px;
    }
    
}

/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------- RESPONSIVE @ 320PX >  ------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/


@media (max-width: 320px) {
	/*--HEADER--*/
	.container{
		width:320px;
	}
	/*--OPTION SET--*/
	ul#filters {
  		width:320px;
 	}
/*
	.entry-header-top{
		padding-left:0px;
		margin-left:0px;
	}
*/
	.content-wrapper {
		width:320px;
	}
/*
	.single-wrap {
		width:320px;
	}
*/
	.content .element{
		width:284px;
		height:284px;	
	}
	.content-wrapper .single-wrap{
		width:320px;
	}
	.headline-container{
/*		width:320px;*/
	}
	.entry-left-column{
		width:320px;
		overflow:hidden;
		margin-bottom:100px;
	}
	.youtube-bg{
		margin:0px auto;
		width:320px;
		height:450px;
/*		background-color:#F4F4F4;*/
	}
	.issuuembed{
		width: 320px;
		height: 665px;
		margin:0px auto;
	}
	.issuu-bg{
		margin:0px auto;
		width:320px;
		height:665px;
		background-color:#F4F4F4;
	}
/*
	.header-img{
		background-image:url('images/header-img3.jpg');
        height: 88px;
	}
*/
/*
    #footer-left {
		width:320px;
		display:none;
	}
*/
    .footer-container {
		width:320px;
	}
	.footer-container-high{
		background-image:url('images/footer-3.jpg');
	}
}