@charset "UTF-8";
/* DJ TP CSS */

/*----------------------- Scrollbar (Hide for Now) -------------------------*/

/* 
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background:#CCCCCC; 
}

::-webkit-scrollbar-thumb {
background: #000000; 
}

::-webkit-scrollbar-thumb:hover {
background: #444444; 
}
*/

/*-------------------------- Master ------------------------------*/


.laptop-only {display: block;}
.iphone-only {display: none;}


/*----------------------------- Arrow ----------------------------*/


.downArrow {
margin:0 auto;
}

.down-arrow-case {
position: absolute;
bottom: 10px;
left: 50%;
width:50px;
height:50px;
transform:translateX(-50%);
z-index: 101;
}


.bounce {
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;

}

@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}

@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}




/*------------------------ Background ------------------------*/


body, html {
height: 100%;
margin: 0;
transition: background-color .22s ease-in-out;
-moz-transition: background-color .22s ease-in-out;
-webkit-transition: background-color .22s ease-in-out;
}

body:hover {
background-color:#F7F6F6;
}



#bg-image-marble { background-image:url(tp-bg-art-marble.jpg); }
#bg-image-marble-black { background-image:url(tp-main-bg-08.jpg); }
#bg-image-speaker-black { background-image:url(tp-bg-art-speaker-black.jpg); }
#bg-image-happenings-black { background-image:url(tp-bg-art-marble-black.jpg); }
#bg-image-oil-black { background-image:url(tp-bg-art-oil-black.jpg); }
#bg-image-oil-white { background-image:url(tp-bg-art-oil-white.jpg); }
#bg-tp { background-image:url(tp-main-testimonials-bg.jpg); }




.background {
position:relative;
min-height: calc(100vh - 87px);
background-size:cover;
}

.background-instagram {
background: url(tp-main-bg-instagram.jpg) no-repeat center;
background-size:cover;
position: relative;
min-height: calc(100vh - 87px);
padding: 100px;
}

.background-gallery {
position:relative;
height:auto;
}



.background-music {
position:relative;
min-height: calc(100vh - 87px);
}

.background-quotes {
position:relative;
height: calc(100vh - 87px);
overflow: hidden;
}



.background-bio {
position:relative;
background-size:cover;
min-height:724px;
background: linear-gradient(270deg, #a1ccff, #a1ffa5, #fff5a1, #ffbba1, #ffa1e3);
background-size: 1000% 1000%;
-webkit-animation: TPBIO 30s ease infinite;
-moz-animation: TPBIO 30s ease infinite;
animation: TPBIO 30s ease infinite;
}

@-webkit-keyframes TPBIO {
0%{background-position:94% 0%}
50%{background-position:7% 100%}
100%{background-position:94% 0%}
}
@-moz-keyframes TPBIO {
0%{background-position:94% 0%}
50%{background-position:7% 100%}
100%{background-position:94% 0%}
}
@keyframes TPBIO { 
0%{background-position:94% 0%}
50%{background-position:7% 100%}
100%{background-position:94% 0%}
}


.background-clients {
position:relative;
min-height: calc(100vh - 87px);
background: linear-gradient(229deg, #f3f3f3, #f6ffff, #f0f0f0, #f8ecff, #eaeaea);
background-size: 1000% 1000%;

-webkit-animation: TP 29s ease infinite;
-moz-animation: TP 29s ease infinite;
animation: TP 29s ease infinite;
}

@-webkit-keyframes TP {
0%{background-position:0% 96%}
50%{background-position:100% 5%}
100%{background-position:0% 96%}
}
@-moz-keyframes TP {
0%{background-position:0% 96%}
50%{background-position:100% 5%}
100%{background-position:0% 96%}
}
@keyframes TP { 
0%{background-position:0% 96%}
50%{background-position:100% 5%}
100%{background-position:0% 96%}
}


.background-hype {
position:relative;
min-height: calc(100vh - 0px);
background: linear-gradient(270deg, #77f6fd, #77d3fd, #c7a5ff, #a7b8fd, #a7fddc);
background-size: 1000% 1000%;
-webkit-animation: TPHYPE 30s ease infinite;
-moz-animation: TPHYPE 30s ease infinite;
animation: TPHYPE 30s ease infinite;
}

@-webkit-keyframes TPHYPE {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes TPHYPE {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes TPHYPE { 
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}






.background-media {
position:relative;
min-height: auto;
background: linear-gradient(270deg, #7d48ff, #4874ff, #e18df9, #5821ff, #2978e6);
background-size: 1000% 1000%;

-webkit-animation: TP-MEDIA 19s ease infinite;
-moz-animation: TP-MEDIA 19s ease infinite;
animation: TP-MEDIA 19s ease infinite;
}

@-webkit-keyframes TP-MEDIA {
0%{background-position:88% 0%}
50%{background-position:13% 100%}
100%{background-position:88% 0%}
}
@-moz-keyframes TP-MEDIA {
0%{background-position:88% 0%}
50%{background-position:13% 100%}
100%{background-position:88% 0%}
}
@keyframes TP-MEDIA { 
0%{background-position:88% 0%}
50%{background-position:13% 100%}
100%{background-position:88% 0%}
}






/*----------------------------- swiper +  parallax ----------------------------*/

/*------- swiper controls the width, content-case controls the height ---------*/




.parallax-window {
position:relative;
min-height: calc(100vh - 87px);
background: transparent;
}


.swiper-container-quotes {
width: 100%;
background-color: blueviolet;
}

.swiper-container-clients {
width: 1000px;
height: auto;
overflow:hidden;
}


.swiper-container {
width: 100%;
height: 100%;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

.swiper-slide img {
position: relative;
width:100%;
display: block;
z-index: 1;
}



.cover {
height:100vh    ;
width: 100vw;
object-fit: cover;
}

/*----------------------- navigation -------------------------*/


#navigation-case {
position:absolute;
width: calc(100% - 100px);
transform: translateX(-50%);
height:auto;
left:50%;
top:25px;
z-index:100;
}

.navi {
float:right;
position:relative;
left:-50%;
}

#navi-space {
position:relative;
width:150px;
height:42px;
}

#navi-space-logo {
position: relative;
top: -3px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
position:relative;
left:50%;
}

li {
float: left;
}

.navi#color-white li a {
font-family: din-2014, sans-serif;
font-weight: 700;
font-style: normal;
font-size:0.9em;
letter-spacing:8px;
display: block;
padding: 18px 0px 10px 12px;
margin:0px 20px;
text-decoration:none;
text-transform:uppercase;
transition: color .22s ease-in-out;
-moz-transition: color .22s ease-in-out;
-webkit-transition: color .22s ease-in-out;
}

.navi#color-white li a:hover {
border-bottom:#FFFFFF 3px solid;
}


.navi#color-black li a {
font-family: din-2014, sans-serif;
font-weight: 700;
font-style: normal;
font-size:0.9em;
letter-spacing:8px;
display: block;
padding: 18px 0px 10px 12px;
margin:0px 20px;
text-decoration:none;
text-transform:uppercase;
transition: color .22s ease-in-out;
-moz-transition: color .22s ease-in-out;
-webkit-transition: color .22s ease-in-out;
}

.navi#color-black li a:hover {
border-bottom:#222222 3px solid;
}


/*------------------ overlay navigation -----------------------*/


.navigation-overlay {
position: fixed;
top: 0px;
height:70px;
z-index: 500;
width: 100%;
background-color:#0E0C0C;
display:none;
}

.nav-overlay-nav-left {
position:absolute;
left:15px;
top:11px;
width:50px;
height:auto;	
z-index: 200;
}

.nav-overlay-nav-right {
position:absolute;
right:15px;
top:15px;
font-size: 2.2em;
line-height: 1.2em;
color:#FFFFFF;
z-index: 200;
}

.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 500;
top: 0;
left: 0;
background-color: rgb(0,0,0);
overflow-x: hidden;
transition: 0.5s;
}

.overlay-content {
position: relative;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}

.overlay a {
font-family: din-2014, sans-serif;
font-weight:500;
text-decoration: none;
text-transform: uppercase;
font-size: 36px;
color: #FFFFFF;
display: block;
transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}

.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 3.3em;
line-height: 0.9em;
}



/*------------------ sticky navigation -----------------------*/


.navigation-case-white {
position: fixed;
top: 0px;
height:70px;
z-index: 200;
width: 100%;
padding-top: 17px;
background: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
}


.sticky {
background-color: rgba(10, 10, 10, 0.98);
opacity: 1;
top: 0px;
}



/*----------------------------- p ----------------------------*/

a { text-decoration:none;	}

p {
font-family: din-2014, sans-serif;
font-weight:600;
text-align:center;
display:block;
font-size:1.2em;
line-height:2.0em;
letter-spacing:8px;
margin:0 auto;
margin-bottom:20px;
padding:25px 0px;
margin:0 auto;
}

p a {
text-decoration:none;
transition: color.22s ease-in-out;
-moz-transition: color .22s ease-in-out;
-webkit-transition: color .22s ease-in-out;
}

p:hover {
text-decoration:none;
color:inherit;
}

.p-bio {
font-family: din-2014, sans-serif;
font-weight:400;
font-size:1.1em;
line-height:1.35em;
letter-spacing:1px;
text-align:left;
text-align: justify;
margin-bottom:0px;
padding:0px;
}



/*----------------------- h1, h2, h3, h4, h5, h6 ------------------------*/


h1 {
font-family: din-2014, sans-serif;
font-weight:400;
text-align:center;
display:block;
font-size:1.0em;
line-height:1.2em;
letter-spacing:4px;
margin:0 auto;
text-transform: uppercase;
}


h2 {
font-family: din-2014, sans-serif;
font-weight:700;
color:#FFFFFF;
text-align:center;
display:block;
font-size:2.6em;
line-height:1.1em;
letter-spacing:2px;
margin:0 auto;
padding-bottom:30px;
text-transform: uppercase;
}


h3 {
font-family: din-2014, sans-serif;
font-weight: 700;
color: #222222;
text-align: center;
font-size: 1.8em;
line-height: 1.6em;
letter-spacing:16px;
margin:0 auto;
padding-bottom:25px;
text-transform: uppercase;
}

h4 {
font-family: din-2014, sans-serif;
font-weight:400;
text-align:center;
text-transform: uppercase;
font-size:2.0em;
line-height:1.2em;
letter-spacing:2px;
margin:0 auto;
padding-bottom:0px;
padding-bottom:25px;
}


h5 {
font-family: din-2014, sans-serif;
font-weight:700;
text-align:left;
text-transform: uppercase;
display:block;
font-size:1.2em;
line-height:1.4em;
letter-spacing:6px;
margin:0 auto;
padding-bottom:30px;
}


h6 {
font-family: din-2014, sans-serif;
font-weight:600;
text-align: center;
font-size: 3.0em;
line-height: 1.2em;
letter-spacing:0px;
border-bottom:3px solid #222222;
width:200px;
margin:0 auto;
}

.h6 /* New Headers - Replacing .svg */ {
font-family: din-2014, sans-serif;
font-weight:600;
text-align: center;
text-transform: uppercase;
font-size: 4.0em;
line-height: 1.2em;
letter-spacing:0px;
border-bottom:3px solid #222222;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
margin:0 auto;	
}

.h6-white /* New Headers - Replacing .svg */ {
font-family: din-2014, sans-serif;
font-weight:600;
text-align: center;
text-transform: uppercase;
font-size: 3.0em;
line-height: 1.2em;
letter-spacing:0px;
color:#FFFFFF;
border-bottom:3px solid #FFFFFF;
margin:0 auto;	
}







#color-grey { color:#B8B9B7; }
#color-sky { color:#CFEBF3; }
#color-white { color:#FFFFFF; }
#color-black { color:#222222; }
#color-yellow { color:#FFF47B; }
#color-neve { color:#0f0039; }
#color-grey a { color:#B8B9B7; text-decoration:none; }
#color-sky a { color:#CFEBF3; text-decoration:none; }
#color-white a { color:#FFFFFF; text-decoration:none; }
#color-black a { color:#3B3C3B; text-decoration:none; }
#color-yellow a { color:#FFF47B; text-decoration:none; }
#color-sky a:hover { color:#FFFFFF; text-decoration:underline; }
#color-grey a:hover { color:#FFFFFF; text-decoration:underline; }
#color-neve a:hover { color:#FFFFFF; text-decoration:underline; }


/*--------------------------------- Main -------------------------------*/


#button-color-yellow { border: 2px #FFF47B solid; color:#FFF47B; }
#button-color-yellow:hover { background-color:#FFF47B; color:#222222; }


#button-color-white { border: 2px #FFFFFF solid; color:#FFFFFF; }
#button-color-white:hover { background-color:#FFFFFF; color:#222222; }

#button-color-black { border: 2px #222222 solid; color: #222222; }
#button-color-black:hover { background-color:#222222; color:#FFFFFF; }

#button-color-sky { border: 2px #CFEBF3 solid; color: #CFEBF3; }
#button-color-sky:hover { background-color:#CFEBF3; color:#FFFFFF; }

#button-color-neve { border: 2px #0f0039 solid; color: #0f0039; }
#button-color-neve:hover { background-color:#0f0039; color:#FFFFFF; }



button {
font-family: din-2014, sans-serif;
padding: 15px 40px;
margin:0 auto;
text-align:center;
text-decoration: none;
font-weight:600;
font-size:1.0em;
letter-spacing:6px;
text-transform:uppercase;
text-decoration:none;
background:none;
transition: background-color .22s ease-in-out;
-moz-transition: background-color .22s ease-in-out;
-webkit-transition: background-color .22s ease-in-out;
}


.button-hype-polygon {
position:relative;
text-align:center;
}


.button-music {
position:relative;
text-align:center;
margin-top:50px;
}


#client-logo {
padding:20px;
opacity: 0.88;
filter: alpha(opacity=88);
transition: all 0.33s ease;
}

#client-logo-tablet-mobile {
display:none;
}



#client-logo:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}



.content /* for simplegrid */ { position: relative; }

.content img {
position:relative;
width:100%;
height:auto;
margin:0 auto;
}

#content-bio-content{
margin-top:147px;
margin-bottom:100px;
padding:0px 30px;
}

#content-bio-right-padding {
padding-right:30px;
}

#content-happenings-content {
padding-top:150px;
padding-bottom:100px;
}

#content-music-content {
padding-top:150px;
padding-bottom:100px;
}

#content-music-mixcloud-iframe {
padding:50px 25px;
}

#content-gallery-content {
padding-top:50px;
padding-bottom:100px;
}

#content-gallery-content img {
padding-bottom:25px;
opacity: 0.88;
filter: alpha(opacity=88);
transition: opacity .22s ease-in-out;
-moz-transition: opacity .22s ease-in-out;
-webkit-transition: opacity .22s ease-in-out;
}

#content-gallery-content img:hover {
opacity: 1.0;
filter: alpha(opacity=100);	
}

#content-bio-tp-image {
margin:0px 0px;	
}

.content-header-center {
position:relative;
margin:0 auto;
width:100%;
height:auto;
margin-bottom:25px;
text-align:center;
}


.content-center {
position:absolute;
width:auto;
height:auto;
left:50%;
top:50%;
z-index:100;
transform: translate(-50%, -50%);
}

.content-center-relative {
position: relative;
width: auto;
height: auto;
left: 50%;
z-index: 100;
transform: translate(-50%, -0%);
margin: 100px 0px;
}


.content-center-media {
position:absolute;
margin-top:0px;
width:65%;
height:auto;
left:50%;
top:50%;
z-index:100;
transform: translate(-50%, -50%);
}

#content-welcome-case {
width:700px;
}



#content-contact-case {
width:1200px;
}


#content-contact-content  {
border-right:#CFEBF3 2px solid;
padding:70px 0px;
}

#content-contact-content-right  {
padding:70px 0px 70px 25px;
}




#content-case-quotes {
width:750px;
min-height:auto;
}



#content-case {
width:1000px;
min-height:auto;
}


#content-case-footer {
width:1000px;
min-height:auto;
}


#content-case-instagram {
width:auto;
min-height:auto;
padding:50px;
background-color:#F3F3F2;
transition: background-color .22s ease-in-out;
-moz-transition: background-color .22s ease-in-out;
-webkit-transition: background-color .22s ease-in-out;
}

#content-case-instagram:hover { background-color:#FFFFFF; }





#content-hype-case {
width:900px;
min-height:auto;
}




#content-client-case {
width:1000px;
height:auto;
}





.content.h {
/* for happenings grid */
background-color: #000000;
}


.happenings {
opacity: 0.77;
transition: opacity 0.22s ease-in;
padding-bottom: 20px;
}


.happenings:hover  {
opacity: 1.0;
}



.happenings img  {
position: relative;
width: 100%;
height: auto;
opacity: 0.44;
transition: opacity 0.33s ease-in;
}



.content-happenings-copy-bg {
position: absolute;
width: 100%;
min-height: 100%;
top: 0px;
}


.content-happenings-copy-bg .copy {
width: 80%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
z-index: 10;
}

.content-happenings-copy-bg .copy p {
font-family: din-2014, sans-serif;
font-weight: 400;
text-align: center;
display: block;
font-size: 1.0em;
line-height: 1.2em;
letter-spacing: 1px;
margin-bottom: 0px;
padding: 0px 0px;
margin: 0 auto;
color: #FFFFFF;
}



.fas,
.fab,
.far {
color:#FFFFFF;
font-size:2.2em;
margin:0px 20px;
}

#content-case-footer .fas,
#content-case-footer .fab,
#content-case-footer .far {
color:#FFFFFF;
font-size:2.2em;
margin:35px 35px 55px 35px;
}


#content-contact-content-right .fas,
#content-contact-content-right .fab,
#content-contact-content-right .far {
color:#CFEBF3;
font-size:0.8em;
margin:0px;
}



footer {
position:relative;
width:100%;
height:500px;
text-align:center;
background-color:#222222;
transition: background-color .22s ease-in-out;
-moz-transition: background-color .22s ease-in-out;
-webkit-transition: background-color .22s ease-in-out;
}

footer:hover { background-color:#000000; }


.footer-credit {
position:absolute;
bottom:20px;
right:20px;
fill: white;
}



.hype-polygon-image {
left:0px;
top:0px;
height:100%;
width:auto;
float:left;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
clip-path: polygon(0 0, 0% 100%, 100% 0);	
shape-outside:  polygon(0 0, 0% 100%, 100% 0);
}

.hype-polygon-image img { height:100%; width:auto; }





.header-testimonials {
position:absolute;
bottom:0;
left:50%;
transform: translateX(-50%);
z-index:10;
width:auto;
height:auto;
text-align:center;
}


.header-music {
position:relative;
bottom:0;
left:50%;
transform: translateX(-50%);
z-index:10;
width:auto;
height:65px;
text-align:center;
padding-bottom:50px;
}



i.icon-dj-tp-logo-w-version {
font-size:5.0em;

}



.media-square-header {
position:relative;
width:50%;
height:100vh;
top:0px;
left:0px;
float:left;
overflow:hidden;
background:#FFFFFF;
}

.media-square-header img {
height:100%;
width:100%;
object-fit: cover;
transition: opacity .22s ease-in-out;
-moz-transition: opacity .22s ease-in-out;
-webkit-transition: opacity .22s ease-in-out;
opacity: 0.88;
filter: alpha(opacity=88); /* For IE8 and earlier */
}

.media-square-header img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

.media-square-content {
position:relative;
text-align:center;
width:50%;
height:100vh;
float:left;
}


.quote-case {
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
z-index: 3;
}

.quotes-main {
position:relative;
font-family: din-2014, sans-serif;
font-weight: 200;
font-style: normal;
text-transform: uppercase;
font-size:3.6em;
line-height:1.0em;
margin-bottom:15px;
display:block;
}

.quotes-small {
font-family: din-2014, sans-serif;
font-weight:700;
font-size:1.0em;
line-height:1.0em;
}



.svg-header {
position:relative;
height:50px;	
width:auto;
display:block;
padding-bottom:25px;
margin:0 auto;
}

.svg-header-contact {
position:relative;
height:50px;	
width:auto;
display:block;
padding-top:75px;
padding-bottom:25px;
margin:0 auto;
}


.svg-header-testimonials {
position:relative;
width:500px;
height:auto;	
display:block;
margin:0 auto;
}

.svg-header-gallery {
position:relative;
width:600px;
height:auto;	
display:block;
margin:0 auto;
padding-bottom:50px;
}




#tp-logo {
width:350px;
height:auto;
}




/*-------------------------------- iPad Landscape --------------------------------*/



@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 




#content-hype-case {
width: 824px;
height: 500px;
}

#content-music-content {
padding-top: 50px;
padding-bottom: 50px;
}

#content-gallery-content {
padding-top: 20px;
padding-bottom: 75px;
}



h3 {
font-size: 2.1em;
line-height: 1.0em;
}

h4 {
font-size: 1.8em;
}


.navi#color-white li a,
.navi#color-black li a {
letter-spacing: 6px;
padding: 18px 0px 10px 0px;
margin: 0px 15px;
}


.svg-header {
height: 40px;
}

.svg-header-gallery {
width: 500px;
}



}




/*------------------------- iPad Portrait 768 x 1024 --------------------------*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 





.background-hype {
min-height: calc(100vh - 87px);
}

.parallax-window,
.background-clients {
min-height: calc(100vh - 87px);
}


button {
padding: 15px 25px;
letter-spacing: 5px;
}


.button-hype-polygon {
position: absolute;
text-align:center;
transform: translateX(-50%);
left:50%;
}


#client-logo-tablet-mobile {
display:inline;
width:75%;
height:auto;
}


#content-client-swiper-logos {
display:none;	
}


footer {
height: 400px;
}


header { display:none; }

#content-client-case,
#content-case-footer,
#content-case {
width: calc(100% - 0px);
}


#content-hype-case {
width: calc(100% - 50px);
height: 500px;
}


h3 {
text-align:center;
}


h4 {
font-size: 1.6em;
line-height: 1.3em;
}

.hype-polygon-image { display:none; }

.media-square-header,
.media-square-content {
height: 75vh;
}



#navigation-case { display:none; }

.navigation-overlay {
display:inline;
}


.swiper-container-clients {
width: calc(100% - 0px);
height: auto;
overflow: hidden;
}


.svg-header {
height: 40px;
}

.svg-header-gallery {
width: 500px;
}


.swiper-button-next, 
.swiper-container-rtl 
.swiper-button-prev {
right: 20px;
}

.swiper-button-prev, 
.swiper-container-rtl 
.swiper-button-next {
left: 20px;
}


}








/*------------- iphone 5,6,7,X, Blackberry, Samsung ---------------*/


@media only screen 
and (min-device-width : 300px) 
and (max-device-width : 812px) {


.laptop-only {display: none;}
.iphone-only {display: block;}




.background-hype {
min-height: calc(100vh - 87px);
}

.parallax-window {
min-height: calc(100vh - 87px);	
}

.background-music {
min-height: auto;	
}

.background-clients {
min-height: 75vh;
}

.background-instagram {
min-height: auto;
padding: 25px;
}



button {
padding: 15px 25px;
letter-spacing: 4px;
}


.button-hype-polygon {
position: absolute;
text-align:center;
transform: translateX(-50%);
left:50%;
width:75%;
}


#content-case-footer .fas,
#content-case-footer .fab,
#content-case-footer .far {
font-size:1.6em;
margin:10px 10px 30px 10px;
}




#client-logo-tablet-mobile {
display:inline;
width:75%;
height:auto;
}


#content-bio-content {
margin-top: 70px;
margin-bottom: 50px;
padding: 0px 0px;
}

#content-bio-right-padding {
padding-right: 10px;
}


#content-client-swiper-logos {
display:none;	
}


footer {
height: 300px;
}

.footer-credit {
display:none;
}


header { display:none; }

#content-client-case,
#content-case-footer,
#content-case {
width: calc(100% - 50px);
}


#content-welcome-case {
width: calc(100% - 50px);
}

#content-case-quotes {
width: calc(100% - 50px);
}

#content-hype-case {
width: calc(100% - 50px);
height: 500px;
}

#content-contact-case {
width: calc(100% - 50px);
}

#content-contact-content {
padding: 0px 0px;
border-right: #CFEBF3 0px solid;
}


#content-case-instagram {
padding: 25px;
}


#content-gallery-content {
padding-top: 75px;
padding-bottom: 50px;
}


#content-music-content {
padding-top: 75px;
padding-bottom: 50px;
}


#content-contact-content-right {
padding: 0px 0px 0px 0px;
}




#content-music-mixcloud-iframe {
padding: 25px 0px;
}



.downArrow {
margin:0 auto;
}

.down-arrow-case {
position: absolute;
bottom: 10px;
left: 50%;
width:50px;
height:50px;
transform:translateX(-50%);
z-index: 101;
}




h1 {
font-size:1.0em;
}




h2 {
font-size: 1.4em;
line-height: 1.1em;
}

h3 {
font-size: 1.2em;
line-height: 1.6em;
text-align: center;
padding-top: 0px;
letter-spacing: 8px;
}

h4 {
font-size: 1.0em;
line-height: 1.2em;
letter-spacing: 6px;
}


h5 {
text-align: center;
font-size: 1.0em;
line-height: 1.2em;
letter-spacing: 1px;
margin: 0 auto;
padding-bottom: 0px;

}



.h6 {
font-size: 2.0em;
line-height: 1.2em;
border-bottom: 1px solid #222222;
-webkit-text-fill-color: rgba(0,0,0,0);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}

.h6-white {
font-size: 2.0em;
}


.hype-polygon-image { display:none; }

.media-square-header,
.media-square-content {
height: 75vh;
position: relative;
width: 100%;
top: 0px;
left: 0px;
float: left;
}

.quotes-main {
font-size: 2.5em;
line-height: 1.0em;
}

#navigation-case { 
display:none; 
}

.navigation-overlay {
display:inline;
height: 50px;
}

.nav-overlay-nav-left {
width: 55px;
}

.nav-overlay-nav-right {
font-size: 1.4em;
line-height: 1.0em;
}


.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 2.3em;
}

.overlay a {
font-size: 22px;
}


.swiper-container-clients {
width: calc(100% - 0px);
height: auto;
overflow: hidden;
}


.svg-header {
height: 25px;
}

.svg-header-gallery {
width: 220px;
}

.svg-header-testimonials {
display:none;
}


.swiper-container-quotes {
height: 375px;
}

.swiper-button-next, 
.swiper-container-rtl 
.swiper-button-prev {
right: 0px;
margin-top: 0px;
background-size: 25px 25px;
width: 25px;
height: 25px;
}

.swiper-button-prev, 
.swiper-container-rtl 
.swiper-button-next {
left: 0px;
margin-top: 0px;
background-size: 25px 25px;
width: 25px;
height: 25px;
}




}