::selection {
  background: #ff0077; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ff0077; /* Gecko Browsers */
}

a {color: #ff0077; cursor: hand;}
p a {
    color: #ff0077;
    font-weight: 900;
}

a:hover {color: #ff0077; cursor: hand;}


/* bg */

.pink-bg {background: #ff00ff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ff3232 0%, #ff00ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ff3232 0%, #ff00ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ff3232 0%, #ff00ff 63.25%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ff00ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

.cyan-bg {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff32be+0,ffe100+100 */
background: #ff32be; /* Old browsers */
background: -moz-linear-gradient(45deg, #ff32be 0%, #ffe100 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #ff32be 0%,#ffe100 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #ff32be 0%,#ffe100 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff32be', endColorstr='#ffe100',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.ota-bg {background-image: url('https://media.giphy.com/media/aGJcpiZNDKW40/giphy.gif'); background-position: center center; background-size: cover;}

.lifeshectic-bg {background-image: url('https://media.giphy.com/media/s0bu1cqRCe5pe/giphy.gif'); background-position: center center; background-size: cover;}



.lh-book-bg {background-image: url('https://media.giphy.com/media/12wPdFw5rvQKA5w9NW/giphy.gif'); background-position: center center; background-size: cover;}


.lh-bg { background-position: center center !important; background-size: cover !important;}

.projects-bg {background-image: url('https://media.giphy.com/media/RjxR7n0dOnXZ6/giphy.gif'); background-position: center center; background-size: cover;}



.videogame-bg {background-image: url('https://media.giphy.com/media/1xoquRC3tceEQ9ydOu/giphy.gif'); background-position: center center; background-size: cover;}

.editorial-bg {background-image: url('https://media.giphy.com/media/l0HlOBZcl7sbV6LnO/giphy.gif'); background-position: center center; background-size: cover;}

.comingsoon-bg {background:#dadada; background-position: center center; background-size: cover;}


.services-bg {background-image: url('https://media.giphy.com/media/3QfMTStNWBCbC/giphy.gif'); background-position: center center; background-size: cover;}

.products-bg {background-image: url('https://media.giphy.com/media/2PumACSgPaPAs/giphy.gif'); background-position: center center; background-size: cover;}

/* type */


h2 {
    font-weight: 900;
    font-size: 75px;
    text-align: center;
    color: #ff0077;
    margin: 75px auto;
	width: 100%;
}

p {
   font-weight: 300;

    font-size: 1.2em;
    letter-spacing: .01em;
    line-height: 30px;
    margin-bottom: 48px;
}


/* modifiers */

.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.bold {font-weight: 900;}
/* SUP */

.wrapper  {
height: 100%; width: 100%;
}


.menubg  {background: #10151b;
	height: 100%; width: 100%;}

.header {
    width: 100%;
    margin-top: 48px;
    position: absolute;
}

.menu {
    height: 48px;
    width: 48px;
    float: right;
}
.logo {
    height: 48px;
    width: 48px;
    float: left;
}

i.fas {
    color: white;
    font-size: 44px;
}

.marquee {
    height: 48px;
    overflow: hidden;
    position: relative;
    margin: 0;
    float: left;
    width: 90%;
}

.marquee h3 {
 color: white;
 position: absolute;
font-size: 15px;
 font-family: monospace;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: marquee 30s linear infinite;
 -webkit-animation: marquee 30s linear infinite;
 animation: marquee 30s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes marquee {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marquee {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes marquee {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

.logo {
    height: 48px;
    width: 48px;
    margin-right: 8px;
    float: left;
}

.logo-completo {
    height: 48px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
}

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

#content .container {
    font-size: 100px;
    font-weight: 900;
    color: white;
    text-align: center;
    list-style: none;
	margin-top: 200px;
}

/* project page */


.cover  {
    height: 500px;
    padding: 48px;
	margin-bottom:40px;
}

.title, .title h2 {
    text-align: right;
    color: white;
    font-weight: 900;
    float: right;
}

/* single page */

.hero {height: 768px;}

h1.heading  {
    font-weight: 900;
    color: white;
    font-size: 90;
	max-width: 590px;
}

.hero h3 {
    color: white;
    font-weight: 600;
    letter-spacing: 0.25em;
    font-size: 30px;
}


.content {background: white; padding: 100px 0;/*      max-width: 768px;  */margin: 0 auto;}

.content .row {
    margin-bottom: 40px;
}

img.logo-about {
    margin: 100px auto;
}

.image-display {
    background: #989898;
    margin: 96px auto;
}


.container ul {
    margin: 0;
    padding: 0;
    line-height: 2em;
}

.rating {text-align: right;}

/* footer */
footer {background: #10151b; min-height: 400px;}

/* footer nav {margin: 0 auto;}
 */
footer p {
    color: #ffffff73;
    text-align: center;
    margin: 48px auto;
    font-size: 14px;
}

footer nav li {
    color: white;
    list-style: none;
    float: left;
    margin: 20px;
    font-size: 24px;
    font-weight: 900;
}

ul.social {
    color: white;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    right: 0;
}

.social li {
    margin: 10px;
    float: left;
    font-size: 40px;
}
.social li a:hover
{
	color:#ff0077;
}
.social li a:hover
{
	color: #ff005a !important;
}
.music {display: none;}


/* // Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) { 
	.marquee {display: none;}
	
	.hero h3 {font-size: 12px;}
	
	h1.heading {font-size: 50px; max-width: 370px;}
	
	footer nav li {
    float: none;
    text-align: center;}
    
	h2 {font-size: 45px;}
	
	#menu-main-menu ul {
    padding: 0;}
	
	.col-4 {
    max-width: 100%;
    flex: none;
}
	
	.rating {
		text-align: center;
	}
	
	.overlay-content li {
    line-height: 1.2em;
    font-size: 72px;
    list-style: none;
}
	
	.overlay-content li {
    line-height: 1em;
    font-size: 60px;
    list-style: none;
    margin: 0;
}
	
	ul#menu-main-menu {
    padding: 0;
}

}

.overlay-content {
    list-style: none;
    color: white;
    font-weight: 900;
    font-size: 120px;
}

/* menu /*
	
	/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */    
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  background-color: #10151b; /* Black fallback color */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 10%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    text-decoration: none;
    /* font-size: 100px; */
    color: white;
    display: block;
    transition: 0.3s;
    /* line-height: 0.1em; */
    text-transform: uppercase;
}

.overlay-content li {
    line-height: 1em;
    list-style: none;
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #ff0077;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 18px;
    right: 305px;
    font-size: 65px;
}

.logo-overlay {
    position: absolute;
    top: 48px;
    left: 315px;
    font-size: 65px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
	
	h4 {font-size: 3em}
	
	h1.heading {
    font-size: 48px;
}
}


h1.sexy {
    font-weight: 900;
    font-size: 80;
    color: transparent;
    -webkit-text-stroke-color: #ff006c;
    -webkit-text-stroke-width: 2px;
    text-align: center;
    margin: 48px auto;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    }
    
    h1.supersexy {
    font-weight: 900;
    font-size: 144;
    color: #ff006c;
    text-align: center;
    margin: 48px auto;
    text-shadow: 8px 9px 0px #ffe4f0;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    }

.full {
    width: 100%;
    height: auto;
}

li {list-style: none;}

.review-list {
    text-align: center;
    font-size: 23px;
    font-weight: 700;
}

.content.blog h1 {
    font-weight: 900;
    font-size: 80;
    color: transparent;
    -webkit-text-stroke-color: #ff006c;
    -webkit-text-stroke-width: 2px;
    text-align: center;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.embed-youtube {
    overflow: hidden;
    position: relative;
    max-width: 100%;
    height: auto;
    padding-bottom: 56.25%;
}

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

.cb-design-1 .cb-review-block {
    background: #f2f2f2;
    border-top: 25px solid #fff;
}

a:hover {text-decoration: none;
	color: #ff005a; }



.showcase.pikmin-bg {
    padding: 140px 40px 100px;
    background-size: cover;
	background-position: center;
}
.menu:hover {cursor: hand; }

h3.shout {
    font-style: italic;
    text-align: center;
    font-size: 52px;
    margin: 40px 0;
    color: #acbbbb;
}

.h4, h4 {
    font-size: 5em;
    color: white;
    font-style: italic;
    -webkit-text-stroke: 1px #ff0076;
    font-weight: 900;
}

a.closebtn:hover {
    color: #ff0077;
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) { 
.overlay-content li {
    line-height: 1em;
    font-size: 60px;
    list-style: none;
}
	
	h4 {font-size: 3em}
}

.row.center-t.logo-social {
    height: 50px;
    margin: 40px 0;
}

i.fab {
    font-size: 24px;
}