/* ================================================================================
    #Reset
================================================================================ */

* { margin: 0; padding: 0; outline: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

header, footer, nav, section, article, aside, figure, details, summary { display: block; }

/* ================================================================================
    #Base
================================================================================ */

body, html { height: 100%; }

body {
    font-family: 'Lato', arial, helvetica, sans-serif; 
    font-size: 15px;
    line-height: 1.2;
    color: #fff;
    background: #fff;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: #47b3ff; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }
img { height: auto; max-width: 100%; font-size: 0; vertical-align: middle; }

h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-weight: normal; }

h1 { }
h2 { font-size: 95px; line-height: 95px; font-weight: 900; text-transform: uppercase; }
h3 { font-size: 57px; line-height: 57px; font-weight: bold; }
h4 { font-size: 55px; line-height: 55px; font-weight: 900; text-transform: uppercase; }
h5 { font-size: 25px; line-height: 28px; font-weight: normal; }
h6 { }

p { padding-bottom: 21px; }

ul { list-style: disc inside none; }
ol { list-style: decimal inside none; }

/* ================================================================================
    #Form Elements
================================================================================ */

input, textarea, select { font-family: arial, helvetica, sans-serif;  font-size: 12px; }
textarea { overflow: auto; resize: none; -webkit-overflow-scrolling: touch; }

input,
textarea { box-sizing: border-box; max-width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; box-shadow: none; }

input[type="checkbox"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; }
input[type="radio"] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; }

input[type="radio"],
input[type="checkbox"] { width: auto; height: auto; padding: 0; border: 0; }

input[type="submit"],
input[type="button"],
input[type="reset"],
button { cursor: pointer; }

button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }

/* ================================================================================
    # Clear 
================================================================================ */

.cl { height: 0; clear: both; }

.cl,
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }

.clearfix { *zoom: 1; }
.clearfix:after { content: ''; font-size: 0; line-height: 0; display: block; clear: both; }

/* ==========================================================================
    #Helpers
========================================================================== */

.left,
.alignleft { float: left; }

.right,
.alignright { float: right; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.alignnone { display: block; }

.vc { position: relative; top: 50%;	}
.vc {
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.quadratic { font-family: 'Roboto Slab', arial, helvetica, sans-serif; }

.hide-on-mobile { display: block; }
.show-on-mobile { display: none; }

/* ================================================================================
    #Cube animation
================================================================================ */

/* Container box to set the sides relative to */
.cube { 
	height: 100px; 

	-webkit-transition: -webkit-transform .33s;
	transition: transform .33s; /* Animate the transform properties */

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; /* <-NB */
}

/* The two faces of the cube */
.flippety,
.flop {
	height: 100%;
}
/* Position the faces */
.flippety {
	-webkit-transform: translateZ(45px); 
	    -ms-transform: translateZ(45px); 
	     -o-transform: translateZ(45px); 
	        transform: translateZ(45px); 
}
.flop {
	-webkit-transform: rotateX(-90deg) translateZ(-45px); 
	    -ms-transform: rotateX(-90deg) translateZ(-45px); 
	     -o-transform: rotateX(-90deg) translateZ(-45px); 
	        transform: rotateX(-90deg) translateZ(-45px); 
}

/* Rotate the cube */
body:not(.ie) .cube:hover,
body:not(.ie) .cube.active {
	-webkit-transform: rotateX(89.99deg); 
	    -ms-transform: rotateX(89.99deg); 
	     -o-transform: rotateX(89.99deg); 
	        transform: rotateX(89.99deg); /* Text bleed at 90º */
}

body.ie .cube:hover .flippety,
body.ie .cube.active .flippety {
	background: #fff !important; 
	color: #31b8e4 !important; 
}

body.ie .flop { display: none; }

/* ================================================================================
    #Containers
================================================================================ */

.wrapper { height: 100%; position: relative; overflow: hidden; }

/* ================================================================================
    #Header
================================================================================ */

.header { position: absolute; top: 0; right: 0; left: 0; z-index: 1000; opacity: 0; visibility: hidden; transition: all 1s ease; }
.header.visible { opacity: 1; visibility: visible; }

.logo { height: 37px; width: 63px; background: url(images/logo-webiorr.png) no-repeat 0 0; position: absolute; top: 26px; left: 20px; font-size: 0; line-height: 0; text-indent: -4000px; background-size: 100% 100%; }
.logo.white { background-image: url(images/logo-webiorr-white.png); }
.logo.logoscale {
	-webkit-animation: logoscale 0.6s ease-in-out 1;
	animation: logoscale 0.6s ease-in-out 1;
	-o-animation: logoscale 0.6s ease-in-out 1;
}
.logo.hidden { display: none; }

@-webkit-keyframes logoscale {
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes logoscale {
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
@-o-keyframes logoscale {
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}

.nav { position: absolute; top: 0; right: 0; font-size: 15px; line-height: 90px; text-transform: uppercase; text-align: center; }
.nav .menu-btn span,
.nav .menu-btn:after,
.nav .menu-btn:before { transition: all 0.4s; }
.nav .menu-btn { height: 90px; width: 90px; float: right; background: #fff; position: relative; }
.nav .menu-btn:after,
.nav .menu-btn:before { content: ''; }
.nav .menu-btn:after,
.nav .menu-btn:before,
.nav .menu-btn span { position: absolute; left: 25px; display: block; width: 40px; height: 3px; background: #31b8e4; }
.nav .menu-btn span { top: 44px; }
.nav .menu-btn:before { top: 34px; }
.nav .menu-btn:after { top: 54px; }
.nav.expanded .menu-btn span { opacity: 0; }
.nav.expanded .menu-btn:before { margin-top: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.nav.expanded .menu-btn:after { margin-top: -10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.nav ul { list-style: none; list-style-position: outside; background: #31b8e4; float: left; position: relative; }
.nav ul {
	-webkit-transform: translateX(100%); 
	    -ms-transform: translateX(100%); 
	     -o-transform: translateX(100%); 
	        transform: translateX(100%); 
}
.nav ul {
	transition: all 1s cubic-bezier(.50, -0.2, .50, 1.2);
}
.nav ul:before {
	content: ''; width: 100px; position: absolute; top: 0; bottom: 0; left: 100%; background: #31b8e4; 
}
.nav.expanded ul {
	-webkit-transform: translateX(0%); 
	    -ms-transform: translateX(0%); 
	     -o-transform: translateX(0%); 
	        transform: translateX(0%); 
}
.nav ul li { float: left; }
.nav ul li a { height: 90px; width: 110px; color: #fff; display: block; }
.nav ul li.current-menu-item a,
.nav ul li a:hover { text-decoration: none; }

.flippety { background: #31b8e4; }
.flop { background: #fff; color: #31b8e4; }

/* ================================================================================
    #Elements
================================================================================ */
.b-cube-side-overlay { height: 4000px; width: 4000px; position: absolute; top: 0; left: 0; background: url(images/overlay.png) no-repeat center center; }
.b-cube-side-cnt h3 { text-transform: uppercase; }
.b-cube-side-cnt { position: absolute; bottom: 70px; right: 200px; left: 70px; }
.b-cube-side-cnt span { color: #31b8e4; }

.video-full { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: url(images/poster1.jpg) no-repeat center center; background-size: cover; }

.video-full .video-holder { position: absolute; top: 0; left: 50%; min-height: 100%; min-width: 100%; }
.video-full .video-holder {
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

.slider { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); }
.slider .owl-stage-outer { height: 100%; }
.slider .owl-stage { height: 100%; }
.slider .owl-item { position: relative; height: 100%; width: 100%; font-size: 20px; line-height: 25px; font-weight: bold; text-align: center; float: left; }
.slider .owl-item .vc { max-width: 960px; margin: 0 auto; padding: 30px; }

.slider .owl-item .colored { color: #31b8e4; }
.slider .owl-item h2 { padding-bottom: 10px; }
.slider .owl-item h3 { font-size: 40px; line-height: 50px; }
.slider .owl-item h3.vc-subtitle { font-size: 34px; line-height: 37px; text-align: center; }
.slider .owl-item h4 { padding-bottom: 20px; text-align: center; }
.slider .owl-item p { padding-bottom: 0; }

.slider-cols { font-size: 18px; line-height: 23px; text-align: left; }
.slider-cols .slider-col { width: 48%; float: left; box-sizing: border-box; }
.slider-cols .slider-col:first-child { padding-left: 40px; }
.slider-cols .slider-col + .slider-col { float: right; }
.slider-cols .slider-col ul { list-style: square; }

.btn { font-size: 25px; line-height: 90px; color: #fff; text-transform: uppercase; }
.btn:hover { text-decoration: none; }


.slide-btn { height: 90px; display: inline-block; vertical-align: top; }
.slide-btn .flippety,
.slide-btn .flop { padding: 0 23px; }

.contact-btn { position: absolute; bottom: 20px; right: 20px; z-index: 20; }

.b-cube-side-content .btn { height: 60px; line-height: 60px; }
.b-cube-side-content .btn .flippety,
.b-cube-side-content .btn .flop {
	height: 100%;
}
/* Position the faces */
.b-cube-side-content .btn .flippety {
	-webkit-transform: translateZ(30px); 
	    -ms-transform: translateZ(30px); 
	     -o-transform: translateZ(30px); 
	        transform: translateZ(30px); 
}
.b-cube-side-content .btn .flop {
	-webkit-transform: rotateX(-90deg) translateZ(-30px); 
	    -ms-transform: rotateX(-90deg) translateZ(-30px); 
	     -o-transform: rotateX(-90deg) translateZ(-30px); 
	        transform: rotateX(-90deg) translateZ(-30px); 
}

/* Cube */
.cube-container { width: 250px; height: 50px; position: relative; perspective: 1000px; display: inline-block; vertical-align: top; margin-right: 5px; }
#cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; }
#cube figure { width: 100%; height: 50px; display: block; position: absolute; background: #31b8e4; }
#cube figure .cube-side-text { position: absolute; top: 0; right: 0; bottom: 0; left: 0; line-height: 47px; color: #fff; text-align: center; }
#cube .front { transform: rotateY(0deg) translateZ(25px); }
#cube .back { transform: rotateX(180deg) translateZ(25px); }
#cube .top { transform: rotateX(90deg) translateZ(25px); background: #30b0da; }
#cube .bottom { transform: rotateX(-90deg) translateZ(25px); background: #30b0da; }

.owl-item.active #cube {
	-webkit-animation: cube_rotate 7s ease-in-out infinite;
	animation: cube_rotate 7s ease-in-out infinite;
	-o-animation: cube_rotate 7s ease-in-out infinite;
}

/* cube_rotate */
@-webkit-keyframes cube_rotate {
	0% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	20% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	25% {
		-webkit-transform: translateZ(-25px) rotateX(-90deg);
		-ms-transform: translateZ(-25px) rotateX(-90deg);
		-o-transform: translateZ(-25px) rotateX(-90deg);
		transform: translateZ(-25px) rotateX(-90deg);
	}
	45% {
		-webkit-transform: translateZ(-25px) rotateX(-90deg);
		-ms-transform: translateZ(-25px) rotateX(-90deg);
		-o-transform: translateZ(-25px) rotateX(-90deg);
		transform: translateZ(-25px) rotateX(-90deg);
	}
	50% {
		-webkit-transform: translateZ(-25px) rotateX(-180deg);
		-ms-transform: translateZ(-25px) rotateX(-180deg);
		-o-transform: translateZ(-25px) rotateX(-180deg);
		transform: translateZ(-25px) rotateX(-180deg);
	}
	70% {
		-webkit-transform: translateZ(-25px) rotateX(-180deg);
		-ms-transform: translateZ(-25px) rotateX(-180deg);
		-o-transform: translateZ(-25px) rotateX(-180deg);
		transform: translateZ(-25px) rotateX(-180deg);
	}
	75% {
		-webkit-transform: translateZ(-25px) rotateX(-270deg);
		-ms-transform: translateZ(-25px) rotateX(-270deg);
		-o-transform: translateZ(-25px) rotateX(-270deg);
		transform: translateZ(-25px) rotateX(-270deg);
	}
	95% {
		-webkit-transform: translateZ(-25px) rotateX(-270deg);
		-ms-transform: translateZ(-25px) rotateX(-270deg);
		-o-transform: translateZ(-25px) rotateX(-270deg);
		transform: translateZ(-25px) rotateX(-270deg);
	}
	100% {
		-webkit-transform: translateZ(-25px) rotateX(-360deg);
		-ms-transform: translateZ(-25px) rotateX(-360deg);
		-o-transform: translateZ(-25px) rotateX(-360deg);
		transform: translateZ(-25px) rotateX(-360deg);
	}
}
@keyframes cube_rotate {
	0% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	20% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	25% {
		-webkit-transform: translateZ(-25px) rotateX(-90deg);
		-ms-transform: translateZ(-25px) rotateX(-90deg);
		-o-transform: translateZ(-25px) rotateX(-90deg);
		transform: translateZ(-25px) rotateX(-90deg);
	}
	45% {
		-webkit-transform: translateZ(-25px) rotateX(-90deg);
		-ms-transform: translateZ(-25px) rotateX(-90deg);
		-o-transform: translateZ(-25px) rotateX(-90deg);
		transform: translateZ(-25px) rotateX(-90deg);
	}
	50% {
		-webkit-transform: translateZ(-25px) rotateX(-180deg);
		-ms-transform: translateZ(-25px) rotateX(-180deg);
		-o-transform: translateZ(-25px) rotateX(-180deg);
		transform: translateZ(-25px) rotateX(-180deg);
	}
	70% {
		-webkit-transform: translateZ(-25px) rotateX(-180deg);
		-ms-transform: translateZ(-25px) rotateX(-180deg);
		-o-transform: translateZ(-25px) rotateX(-180deg);
		transform: translateZ(-25px) rotateX(-180deg);
	}
	75% {
		-webkit-transform: translateZ(-25px) rotateX(-270deg);
		-ms-transform: translateZ(-25px) rotateX(-270deg);
		-o-transform: translateZ(-25px) rotateX(-270deg);
		transform: translateZ(-25px) rotateX(-270deg);
	}
	95% {
		-webkit-transform: translateZ(-25px) rotateX(-270deg);
		-ms-transform: translateZ(-25px) rotateX(-270deg);
		-o-transform: translateZ(-25px) rotateX(-270deg);
		transform: translateZ(-25px) rotateX(-270deg);
	}
	100% {
		-webkit-transform: translateZ(-25px) rotateX(-360deg);
		-ms-transform: translateZ(-25px) rotateX(-360deg);
		-o-transform: translateZ(-25px) rotateX(-360deg);
		transform: translateZ(-25px) rotateX(-360deg);
	}
}
@-o-keyframes cube_rotate {
	0% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	20% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	25% {
		-webkit-transform: translateZ(-25px) rotateX(-90deg);
		-ms-transform: translateZ(-25px) rotateX(-90deg);
		-o-transform: translateZ(-25px) rotateX(-90deg);
		transform: translateZ(-25px) rotateX(-90deg);
	}
	45% {
		-webkit-transform: translateZ(-25px) rotateX(-90deg);
		-ms-transform: translateZ(-25px) rotateX(-90deg);
		-o-transform: translateZ(-25px) rotateX(-90deg);
		transform: translateZ(-25px) rotateX(-90deg);
	}
	50% {
		-webkit-transform: translateZ(-25px) rotateX(-180deg);
		-ms-transform: translateZ(-25px) rotateX(-180deg);
		-o-transform: translateZ(-25px) rotateX(-180deg);
		transform: translateZ(-25px) rotateX(-180deg);
	}
	70% {
		-webkit-transform: translateZ(-25px) rotateX(-180deg);
		-ms-transform: translateZ(-25px) rotateX(-180deg);
		-o-transform: translateZ(-25px) rotateX(-180deg);
		transform: translateZ(-25px) rotateX(-180deg);
	}
	75% {
		-webkit-transform: translateZ(-25px) rotateX(-270deg);
		-ms-transform: translateZ(-25px) rotateX(-270deg);
		-o-transform: translateZ(-25px) rotateX(-270deg);
		transform: translateZ(-25px) rotateX(-270deg);
	}
	95% {
		-webkit-transform: translateZ(-25px) rotateX(-270deg);
		-ms-transform: translateZ(-25px) rotateX(-270deg);
		-o-transform: translateZ(-25px) rotateX(-270deg);
		transform: translateZ(-25px) rotateX(-270deg);
	}
	100% {
		-webkit-transform: translateZ(-25px) rotateX(-360deg);
		-ms-transform: translateZ(-25px) rotateX(-360deg);
		-o-transform: translateZ(-25px) rotateX(-360deg);
		transform: translateZ(-25px) rotateX(-360deg);
	}
}

.boxes { height: 100%; overflow: auto; }
.boxes .box { width: 25%; position: relative; padding-top: 25%; float: left; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden; }

.boxes .box:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); opacity: 0; }
.boxes .box:after {
	transition: all 0.3s ease-in-out;
	-webkit-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
}
.boxes .box:hover:after {
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.boxes .box span { position: absolute; top: 40px; right: 10px; left: 10px; text-align: center; z-index: 2; font-size: 29px; line-height: 32px; color: #fff; opacity: 0; }
.boxes .box span {
	transition: all 0.3s ease-in-out;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.boxes .box:hover span {
	opacity: 1;
	top: 50%;
}

.contact-text { position: absolute; bottom: 33px; right: 33px; left: 33px; font-size: 90px; line-height: 100px; font-weight: 900; text-transform: uppercase; }
.contact-text a { color: #fff; }
.contact-text a:hover { text-decoration: none; }

.email-btn { height: 200px; display: inline-block; vertical-align: top; }
.email-btn .flippety,
.email-btn .flop { padding: 0 20px; }
.email-btn .flippety {
	background: #2cacd6; 
	-webkit-transform: translateZ(100px); 
	    -ms-transform: translateZ(100px); 
	     -o-transform: translateZ(100px); 
	        transform: translateZ(100px); 
}
.email-btn .flop {
	-webkit-transform: rotateX(-90deg) translateZ(-100px); 
	    -ms-transform: rotateX(-90deg) translateZ(-100px); 
	     -o-transform: rotateX(-90deg) translateZ(-100px); 
	        transform: rotateX(-90deg) translateZ(-100px); 
}

.webbie { height: 33px; width: 36px; background: url(images/webbie.png) 0 0 no-repeat; background-size: cover; position: absolute; }
.webbie-big { height: 57px; width: 62px; }
.webbie:before { content: ''; height: 2000px; width: 2px; background: #fff; position: absolute; bottom: 100%; left: 50%; margin-left: -1px; }
.webbie-1 { top: -110px; left: 10%; }
.webbie-2 { top: -200px; left: 25%; }
.webbie-3 { top: -110px; left: 40%; }
.webbie-4 { top: -110px; left: 50%; }
.webbie-5 { top: -110px; left: 70%; }
.webbie-6 { top: -110px; left: 90%; }

.pt-page-current .webbie-1 {
	-webkit-animation: webbie1 2.2s ease-in-out 1 1.5s forwards;
	animation: webbie1 2.2s ease-in-out 1 1.5s forwards;
	-o-animation: webbie1 2.2s ease-in-out 1 1.5s forwards;
}
@-webkit-keyframes webbie1 {
	0% { top: -100px; }
	80% { top: 328px; }
	100% { top: 298px; }
}
@keyframes webbie1 {
	0% { top: -100px; }
	80% { top: 328px; }
	100% { top: 298px; }
}
@-o-keyframes webbie1 {
	0% { top: -100px; }
	80% { top: 328px; }
	100% { top: 298px; }
}

.pt-page-current .webbie-2 {
	-webkit-animation: webbie2 1.5s ease 1 0.7s forwards, pulsate 1.5s ease-in-out infinite;
	animation: webbie2 1.5s ease 1 0.7s forwards, pulsate 1.5s ease-in-out infinite;
	-o-animation: webbie2 1.5s ease 1 0.7s forwards, pulsate 1.5s ease-in-out infinite;
}
@-webkit-keyframes webbie2 {
	0% { top: -200px; }
	100% { top: 40%; }
}
@keyframes webbie2 {
	0% { top: -200px; }
	100% { top: 40%; }
}
@-o-keyframes webbie2 {
	0% { top: -200px; }
	100% { top: 40%; }
}

@-webkit-keyframes pulsate {
	0% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
		transform: translateY(100%);
	}
	100% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes pulsate {
	0% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
		transform: translateY(100%);
	}
	100% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}
@-o-keyframes pulsate {
	0% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
		transform: translateY(100%);
	}
	100% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}

.pt-page-current .webbie-3 {
	-webkit-animation: webbie3 2s ease-in-out 1 0.4s forwards;
	animation: webbie3 2s ease-in-out 1 0.4s forwards;
	-o-animation: webbie3 2s ease-in-out 1 0.4s forwards;
}
@-webkit-keyframes webbie3 {
	0% { top: -100px; }
	100% { top: 110%; }
}
@keyframes webbie3 {
	0% { top: -100px; }
	100% { top: 110%; }
}
@-o-keyframes webbie3 {
	0% { top: -100px; }
	100% { top: 110%; }
}

.pt-page-current .webbie-4 {
	-webkit-animation: webbie4 1.5s ease-in-out 1 0.4s forwards;
	animation: webbie4 1.5s ease-in-out 1 0.4s forwards;
	-o-animation: webbie4 1.5s ease-in-out 1 0.4s forwards;
}
@-webkit-keyframes webbie4 {
	0% { top: -100px; }
	80% { top: 243px; }
	100% { top: 213px; }
}
@keyframes webbie4 {
	0% { top: -100px; }
	80% { top: 243px; }
	100% { top: 213px; }
}
@-o-keyframes webbie4 {
	0% { top: -100px; }
	80% { top: 243px; }
	100% { top: 213px; }
}

.pt-page-current .webbie-5 {
	-webkit-animation: webbie5 2.5s ease-in-out 1 1s forwards;
	animation: webbie5 2.5s ease-in-out 1 1s forwards;
	-o-animation: webbie5 2.5s ease-in-out 1 1s forwards;
}
@-webkit-keyframes webbie5 {
	0% { top: -100px; }
	100% { top: 110%; }
}
@keyframes webbie5 {
	0% { top: -100px; }
	100% { top: 110%; }
}
@-o-keyframes webbie5 {
	0% { top: -100px; }
	100% { top: 110%; }
}

.pt-page-current .webbie-6 {
	-webkit-animation: webbie6 1s ease-in-out 1 1.2s forwards;
	animation: webbie6 1s ease-in-out 1 1.2s forwards;
	-o-animation: webbie6 1s ease-in-out 1 1.2s forwards;
}
@-webkit-keyframes webbie6 {
	0% { top: -100px; }
	80% { top: 537px; }
	100% { top: 507px; }
}
@keyframes webbie6 {
	0% { top: -100px; }
	80% { top: 537px; }
	100% { top: 507px; }
}
@-o-keyframes webbie6 {
	0% { top: -100px; }
	80% { top: 537px; }
	100% { top: 507px; }
}

.socials { position: absolute; top: 105px; right: 0; font-size: 50px; line-height: 90px; text-align: center; z-index: 10; }
.socials a { height: 90px; width: 90px; background: #fff; color: #31b8e4; display: block; }
.socials a + a { margin-top: 15px; }
.socials a .flippety { background: #fff; }
.socials a .flop { background: #2cacd6; color: #fff; }

.socials a .flop {
	-webkit-transform: rotateY(-90deg) translateY(-100%) translateZ(45px); 
	    -ms-transform: rotateY(-90deg) translateY(-100%) translateZ(45px); 
	     -o-transform: rotateY(-90deg) translateY(-100%) translateZ(45px); 
	        transform: rotateY(-90deg) translateY(-100%) translateZ(45px); 
}
/* Rotate the cube */
.socials a.cube:hover {
	-webkit-transform: rotateY(89.99deg); 
	    -ms-transform: rotateY(89.99deg); 
	     -o-transform: rotateY(89.99deg); 
	        transform: rotateY(89.99deg); /* Text bleed at 90º */
}

.pt-page-current .socials .facebook-link {
	-webkit-animation: social-in 1s ease-in-out 1 1s backwards;
	animation: social-in 1s ease-in-out 1 1s backwards;
	-o-animation: social-in 1s ease-in-out 1 1s backwards;
}
.pt-page-current .socials .twitter-link {
	-webkit-animation: social-in 1s ease-in-out 1 1.2s backwards;
	animation: social-in 1s ease-in-out 1 1.2s backwards;
	-o-animation: social-in 1s ease-in-out 1 1.2s backwards;
}
.pt-page-current .socials .linkedin-link {
	-webkit-animation: social-in 1s ease-in-out 1 1.4s backwards;
	animation: social-in 1s ease-in-out 1 1.4s backwards;
	-o-animation: social-in 1s ease-in-out 1 1.4s backwards;
}
.pt-page-current .socials .google-plus-link {
	-webkit-animation: social-in 1s ease-in-out 1 1.6s backwards;
	animation: social-in 1s ease-in-out 1 1.6s backwards;
	-o-animation: social-in 1s ease-in-out 1 1.6s backwards;
}

@-webkit-keyframes social-in {
	0% {
		opacity: 0;
		-webkit-transform: translateX(90px);
		-ms-transform: translateX(90px);
		-o-transform: translateX(90px);
		transform: translateX(90px);
	}
	80% {
		opacity: 1;
		-webkit-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
		-o-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes social-in {
	0% {
		opacity: 0;
		-webkit-transform: translateX(90px);
		-ms-transform: translateX(90px);
		-o-transform: translateX(90px);
		transform: translateX(90px);
	}
	80% {
		opacity: 1;
		-webkit-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
		-o-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}
@-o-keyframes social-in {
	0% {
		opacity: 0;
		-webkit-transform: translateX(90px);
		-ms-transform: translateX(90px);
		-o-transform: translateX(90px);
		transform: translateX(90px);
	}
	80% {
		opacity: 1;
		-webkit-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
		-o-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}

.error-page { text-align: center; }
.error-page h3 { font-size: 30px; line-height: 50px; text-transform: uppercase; }
.error-page h3 + h3 { margin-top: 10px; }
.error-page h3 a { color: #fff; text-decoration: none; }
.error-image { margin-bottom: 20px; }

.error-page .cube-container { width: 100px; /*height: 50px; position: relative; perspective: 1000px; display: inline-block; vertical-align: top;*/ margin: 0 5px; }
/*.error-page #cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; }*/
.error-page #cube figure { width: 100%; /*height: 50px; display: block; position: absolute; background: #31b8e4;*/ background: #fff; }
.error-page #cube figure .cube-side-text {/* position: absolute; top: 0; right: 0; bottom: 0; left: 0; line-height: 47px; color: #fff; text-align: center; */ color: #31b8e4; }
.error-page #cube .front { transform: rotateY(0deg) translateZ(25px); }
.error-page #cube .back { transform: rotateX(180deg) translateZ(25px); }
.error-page #cube .top { transform: rotateX(90deg) translateZ(25px); background: #e9faff; }
.error-page #cube .bottom { transform: rotateX(-90deg) translateZ(25px); background: #e9faff; }
.error-page #cube {
	-webkit-animation: cube_rotate 7s ease-in-out infinite;
	animation: cube_rotate 7s ease-in-out infinite;
	-o-animation: cube_rotate 7s ease-in-out infinite;
}
.error-page .reverse { width: 85px; }
.error-page .reverse #cube {
	-webkit-animation: cube_rotate_reverse 7s ease-in-out infinite;
	animation: cube_rotate_reverse 7s ease-in-out infinite;
	-o-animation: cube_rotate_reverse 7s ease-in-out infinite;
}

/* cube_rotate_reverse */
@-webkit-keyframes cube_rotate_reverse {
	0% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	20% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	25% {
		-webkit-transform: translateZ(-25px) rotateX(90deg);
		-ms-transform: translateZ(-25px) rotateX(90deg);
		-o-transform: translateZ(-25px) rotateX(90deg);
		transform: translateZ(-25px) rotateX(90deg);
	}
	45% {
		-webkit-transform: translateZ(-25px) rotateX(90deg);
		-ms-transform: translateZ(-25px) rotateX(90deg);
		-o-transform: translateZ(-25px) rotateX(90deg);
		transform: translateZ(-25px) rotateX(90deg);
	}
	50% {
		-webkit-transform: translateZ(-25px) rotateX(180deg);
		-ms-transform: translateZ(-25px) rotateX(180deg);
		-o-transform: translateZ(-25px) rotateX(180deg);
		transform: translateZ(-25px) rotateX(180deg);
	}
	70% {
		-webkit-transform: translateZ(-25px) rotateX(180deg);
		-ms-transform: translateZ(-25px) rotateX(180deg);
		-o-transform: translateZ(-25px) rotateX(180deg);
		transform: translateZ(-25px) rotateX(180deg);
	}
	75% {
		-webkit-transform: translateZ(-25px) rotateX(270deg);
		-ms-transform: translateZ(-25px) rotateX(270deg);
		-o-transform: translateZ(-25px) rotateX(270deg);
		transform: translateZ(-25px) rotateX(270deg);
	}
	95% {
		-webkit-transform: translateZ(-25px) rotateX(270deg);
		-ms-transform: translateZ(-25px) rotateX(270deg);
		-o-transform: translateZ(-25px) rotateX(270deg);
		transform: translateZ(-25px) rotateX(270deg);
	}
	100% {
		-webkit-transform: translateZ(-25px) rotateX(360deg);
		-ms-transform: translateZ(-25px) rotateX(360deg);
		-o-transform: translateZ(-25px) rotateX(360deg);
		transform: translateZ(-25px) rotateX(360deg);
	}
}
@keyframes cube_rotate_reverse {
	0% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	20% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	25% {
		-webkit-transform: translateZ(-25px) rotateX(90deg);
		-ms-transform: translateZ(-25px) rotateX(90deg);
		-o-transform: translateZ(-25px) rotateX(90deg);
		transform: translateZ(-25px) rotateX(90deg);
	}
	45% {
		-webkit-transform: translateZ(-25px) rotateX(90deg);
		-ms-transform: translateZ(-25px) rotateX(90deg);
		-o-transform: translateZ(-25px) rotateX(90deg);
		transform: translateZ(-25px) rotateX(90deg);
	}
	50% {
		-webkit-transform: translateZ(-25px) rotateX(180deg);
		-ms-transform: translateZ(-25px) rotateX(180deg);
		-o-transform: translateZ(-25px) rotateX(180deg);
		transform: translateZ(-25px) rotateX(180deg);
	}
	70% {
		-webkit-transform: translateZ(-25px) rotateX(180deg);
		-ms-transform: translateZ(-25px) rotateX(180deg);
		-o-transform: translateZ(-25px) rotateX(180deg);
		transform: translateZ(-25px) rotateX(180deg);
	}
	75% {
		-webkit-transform: translateZ(-25px) rotateX(270deg);
		-ms-transform: translateZ(-25px) rotateX(270deg);
		-o-transform: translateZ(-25px) rotateX(270deg);
		transform: translateZ(-25px) rotateX(270deg);
	}
	95% {
		-webkit-transform: translateZ(-25px) rotateX(270deg);
		-ms-transform: translateZ(-25px) rotateX(270deg);
		-o-transform: translateZ(-25px) rotateX(270deg);
		transform: translateZ(-25px) rotateX(270deg);
	}
	100% {
		-webkit-transform: translateZ(-25px) rotateX(360deg);
		-ms-transform: translateZ(-25px) rotateX(360deg);
		-o-transform: translateZ(-25px) rotateX(360deg);
		transform: translateZ(-25px) rotateX(360deg);
	}
}
@-o-keyframes cube_rotate_reverse {
	0% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	20% {
		-webkit-transform: translateZ(-25px) rotateX(0deg);
		-ms-transform: translateZ(-25px) rotateX(0deg);
		-o-transform: translateZ(-25px) rotateX(0deg);
		transform: translateZ(-25px) rotateX(0deg);
	}
	25% {
		-webkit-transform: translateZ(-25px) rotateX(90deg);
		-ms-transform: translateZ(-25px) rotateX(90deg);
		-o-transform: translateZ(-25px) rotateX(90deg);
		transform: translateZ(-25px) rotateX(90deg);
	}
	45% {
		-webkit-transform: translateZ(-25px) rotateX(90deg);
		-ms-transform: translateZ(-25px) rotateX(90deg);
		-o-transform: translateZ(-25px) rotateX(90deg);
		transform: translateZ(-25px) rotateX(90deg);
	}
	50% {
		-webkit-transform: translateZ(-25px) rotateX(180deg);
		-ms-transform: translateZ(-25px) rotateX(180deg);
		-o-transform: translateZ(-25px) rotateX(180deg);
		transform: translateZ(-25px) rotateX(180deg);
	}
	70% {
		-webkit-transform: translateZ(-25px) rotateX(180deg);
		-ms-transform: translateZ(-25px) rotateX(180deg);
		-o-transform: translateZ(-25px) rotateX(180deg);
		transform: translateZ(-25px) rotateX(180deg);
	}
	75% {
		-webkit-transform: translateZ(-25px) rotateX(270deg);
		-ms-transform: translateZ(-25px) rotateX(270deg);
		-o-transform: translateZ(-25px) rotateX(270deg);
		transform: translateZ(-25px) rotateX(270deg);
	}
	95% {
		-webkit-transform: translateZ(-25px) rotateX(270deg);
		-ms-transform: translateZ(-25px) rotateX(270deg);
		-o-transform: translateZ(-25px) rotateX(270deg);
		transform: translateZ(-25px) rotateX(270deg);
	}
	100% {
		-webkit-transform: translateZ(-25px) rotateX(360deg);
		-ms-transform: translateZ(-25px) rotateX(360deg);
		-o-transform: translateZ(-25px) rotateX(360deg);
		transform: translateZ(-25px) rotateX(360deg);
	}
}

.blocks { max-width: 1003px; margin: 0 auto; padding: 0 10px; }
.blocks .block { width: 321px; float: left; background: #31b8e4; position: relative; }
.blocks .block + .block { margin-left: 20px; }
.blocks .block h3 { margin-right: 100px; }
.blocks .block h3 .btn { height: 98px; font-size: 25px; line-height: 98px; font-weight: normal; color: #fff; text-transform: uppercase; display: block; }
.blocks .block h3 .btn .flippety,
.blocks .block h3 .btn .flop { padding: 0 23px; }
.blocks .block h3 .btn .flippety {
	-webkit-transform: translateZ(50px); 
	    -ms-transform: translateZ(50px); 
	     -o-transform: translateZ(50px); 
	        transform: translateZ(50px); 
}
.blocks .block h3 .btn .flop {
	-webkit-transform: rotateX(-90deg) translateZ(-50px); 
	    -ms-transform: rotateX(-90deg) translateZ(-50px); 
	     -o-transform: rotateX(-90deg) translateZ(-50px); 
	        transform: rotateX(-90deg) translateZ(-50px); 
}
.blocks .block .block-icon { height: 98px; width: 98px; background: url(images/icons.png) no-repeat 0 0; position: absolute; top: 0; right: 0; }
.blocks .block-webdesign .block-icon { background-position: -100px 0; }
.blocks .block-applications .block-icon { background-position: -200px 0; }
.blocks .block .block-cnt { padding: 32px 0 33px 0; font-size: 22px; line-height: 25px; }
.blocks .block .block-cnt ul { list-style: none; list-style-position: outside; }
.blocks .block .block-cnt ul li .tt-title { display: block; color: #fff; transition: color 0.3s; cursor: pointer; line-height: 40px; text-transform: uppercase; padding: 0 30px; }
.blocks .block .block-cnt ul li .tt-title:hover { color: #a6e5f9; }

.blocks .block .block-cnt ul li .tt-content { color: #31b8e4; }
.blocks .block .block-cnt ul li .tt-content-inner { background: #fff; }
.blocks .block .block-cnt ul li .tt-content h5 { text-transform: uppercase; padding: 25px 0; }
.blocks .block .block-cnt ul li .tt-content .tt-text { width: 48%; float: left; box-sizing: border-box; }
.blocks .block .block-cnt ul li .tt-content .tt-img { width: 48%; float: right; }

#process .process-mobile { display: none; }
.process-content { display: none; }

.popup { background: #fff; color: #31b8e4; }
.popup-header { padding: 10px 40px 15px 40px; background: #31b8e4; }
.popup-header h3 { font-size: 44px; line-height: 45px; color: #fff; }
.popup-content { padding: 30px 40px 20px 40px; font-size: 17px; line-height: 22px; text-align: justify; }

/* Scale in */
@-webkit-keyframes scale-in {
	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes scale-in {
	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
@-o-keyframes scale-in {
	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}

@media only screen and (min-width: 1024px) {
	.blocks .block .block-cnt ul li .tt-content { height: 100%; width: 682px; position: absolute; top: 0; left: 100%; color: #31b8e4; z-index: 100; opacity: 0; visibility: hidden; box-sizing: border-box; padding-left: 20px; }
	.blocks .block .block-cnt ul li .tt-content-inner { height: 100%; box-sizing: border-box; padding: 10px 10px 10px 20px; }
	.blocks .block .block-cnt ul li .tt-title { position: relative; }
	.blocks .block .block-cnt ul li .tt-title:before { content: ''; border-top: 8px solid transparent; border-right: 14px solid #fff; border-bottom: 8px solid transparent; position: absolute; top: 50%; right: -20px; display: none; }
	.blocks .block .block-cnt ul li .tt-title:before {
		-webkit-transform: translateY(-50%); 
		    -ms-transform: translateY(-50%); 
		     -o-transform: translateY(-50%); 
		        transform: translateY(-50%); 
	}
	.blocks .block .block-cnt ul li:hover .tt-title:before { display: block; }
	.blocks .block .block-cnt ul li:hover .tt-content { opacity: 1; visibility: visible; }

	.blocks .block-applications .block-cnt ul li .tt-title { text-align: right; }
	.blocks .block-applications .block-cnt ul li .tt-content { right: 100%; left: auto; padding: 0 20px 0 0; }
	.blocks .block-applications .block-cnt ul li .tt-title:before,
	.blocks .block-webdesign .block-cnt ul li .tt-title:before { border-right: 0; border-left: 14px solid #fff; right: auto; left: -20px; }

	.blocks .block-webdesign .block-cnt ul li .tt-title { text-align: center; }

	.blocks .block-webdesign .block-cnt ul li .tt-title:after,
	.blocks .block-webdesign .block-cnt ul li .tt-title:after { content: ''; border-top: 8px solid transparent; border-right: 14px solid #fff; border-bottom: 8px solid transparent; position: absolute; top: 50%; right: -20px; display: none; }
	.blocks .block-webdesign .block-cnt ul li:hover .tt-title:after { display: block; }

	.blocks .block .block-cnt ul li .tt-content-left { width: 341px; left: -341px; padding: 0 20px 0 0; }
	.blocks .block .block-cnt ul li .tt-content-right { width: 341px; right: -341px; left: auto; padding: 0 0 0 20px; }
	.blocks .block .block-cnt ul li .tt-content-left .tt-content-inner { padding: 10px 20px; }
	.blocks .block .block-cnt ul li .tt-content-right .tt-content-inner { padding: 10px; }
	
	.blocks .block .block-cnt ul li .tt-mobile { display: block !important; }
}

@media only screen and (max-width: 1100px) {
	.slider .owl-item .vc { padding: 30px 65px; }
	.slider-cols { font-size: 17px; }
}

@media only screen and (max-width: 1024px) {
	.boxes .box { width: 50%; padding-top: 50%; }

	.video-full video { display: none; }
}

@media only screen and (max-width: 1023px) {
	#services { padding: 100px 0 10px 0; box-sizing: border-box; }
	#services .vc {
		height: 100%; 
		overflow: auto;
		top: 0; 
		-webkit-transform: translateY(0); 
		    -ms-transform: translateY(0); 
		     -o-transform: translateY(0); 
		        transform: translateY(0); 
	}
	.blocks .block { width: auto; float: none; }
	.blocks .block + .block { margin: 10px 0 0 0; }
	.blocks .block .block-cnt ul li .tt-mobile { margin: 10px 30px; padding: 10px; background: #fff; display: none; }
	.blocks .block .block-cnt ul li .tt-mobile .tt-content-left { width: 48%; float: left; box-sizing: border-box; padding: 0; }
	.blocks .block .block-cnt ul li .tt-mobile .tt-content-right { width: 48%; float: right; padding: 0; }
	.blocks .block .block-cnt ul li .tt-content img { display: block; margin: 0 auto; }

	.slider-cols { padding: 0 100px; }
	.slider-cols .slider-col { width: auto; float: none; }
	.slider-cols .slider-col:first-child { padding-left: 0; }
	.slider-cols .slider-col + .slider-col { float: none; }

	.process-page .logo { display: none; }
}

@media only screen and (max-width: 767px) {
	h2 { font-size: 40px; line-height: 43px; }
	h3 { font-size: 22px; line-height: 28px; }
	h4 { font-size: 18px; line-height: 22px; }
	h5 { font-size: 16px; line-height: 20px; }

	/* ==========================================================================
	    #Helpers
	========================================================================== */

	.hide-on-mobile { display: none; }
	.show-on-mobile { display: block; }

	/* ================================================================================
	    #Cube animation
	================================================================================ */

	/* Container box to set the sides relative to */
	.cube { height: auto; }

	/* The two faces of the cube */
	.flop { display: none; }
	/* Position the faces */
	.flippety {
		-webkit-transform: translateZ(0); 
		    -ms-transform: translateZ(0); 
		     -o-transform: translateZ(0); 
		        transform: translateZ(0); 
	}

	/* Rotate the cube */
	body:not(.ie) .cube:hover,
	body:not(.ie) .cube.active {
		-webkit-transform: rotateX(0deg); 
		    -ms-transform: rotateX(0deg); 
		     -o-transform: rotateX(0deg); 
		        transform: rotateX(0deg); /* Text bleed at 90º */
	}

	body:not(.ie) .cube:hover .flippety,
	body:not(.ie) .cube.active .flippety { background: #fff; color: #31b8e4; }

	/* ================================================================================
	    #Header
	================================================================================ */

    .header { opacity: 1; visibility: visible; }

    .b-container { display: none; }
	.intro-mobile { display: block; }

	.logo { top: 12px; left: 12px; }

    .nav { font-size: 18px; line-height: 45px; }
	.nav .menu-btn { height: 60px; width: 60px; float: none; display: block; }
	
	.nav .menu-btn:after,
	.nav .menu-btn:before,
	.nav .menu-btn span { left: 16px; width: 28px; height: 3px; }
	.nav .menu-btn span { top: 29px; }
	.nav .menu-btn:before { top: 22px; }
	.nav .menu-btn:after { top: 36px; }
	.nav.expanded .menu-btn:before { margin-top: 7px; }
	.nav.expanded .menu-btn:after { margin-top: -7px; }
	.nav ul { float: none; position: absolute; top: 60px; right: 0; }
	.nav ul { transition: all 0.4s cubic-bezier(.50, -0.2, .50, 1.2); }
	.nav ul li { float: none; display: block; }
	.nav ul li a { height: auto; width: auto; }
	.nav ul li a .flippety { padding: 0 18px; }

	/* ================================================================================
	    #Elements
	================================================================================ */
	.intro { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; text-transform: uppercase; }
	.intro .vc { position: absolute; right: 0; left: 0; padding: 0 10px; text-align: center; }
	.intro span { color: #31b8e4; }
	.intro h2 { padding-top: 60px; }
	.intro h3 { padding-bottom: 20px; }

	.btn { font-size: 25px; line-height: 45px; background: #31b8e4; color: #fff; text-transform: uppercase; display: inline-block; vertical-align: top; padding: 0 20px; }
	.btn:hover { background: #fff; color: #31b8e4; }

	.slider .owl-item { font-size: 16px; line-height: 20px; }
	.slider .owl-item .vc { padding: 10px 40px; }
	.slider .owl-item h2 { font-size: 34px; line-height: 37px; padding-bottom: 5px; }
	.slider .owl-item h3 { font-size: 24px; line-height: 31px; }
	.slider .owl-item h3.vc-subtitle { font-size: 22px; line-height: 25px; }
	.slider .owl-item h4 { font-size: 22px; line-height: 25px; padding-bottom: 10px; }

	.slider-cols { padding: 0; font-size: 14px; line-height: 17px; display: inline-block; vertical-align: top; }
	.slider-cols .slider-col ul { padding-left: 20px; }
	.slider-cols .slider-col ul li { padding-bottom: 5px; }

	.quadratic-hide-on-mobile { display: none; }

	/* Cube */
	.cube-container { width: 150px; height: 40px; margin: 10px auto 0 auto; display: block; }
	#cube figure { height: 40px; }
	#cube figure .cube-side-text { line-height: 37px; }
	#cube .front { transform: rotateY(0deg) translateZ(20px); }
	#cube .back { transform: rotateX(180deg) translateZ(20px); }
	#cube .top { transform: rotateX(90deg) translateZ(20px); }
	#cube .bottom { transform: rotateX(-90deg) translateZ(20px); }

	.slide-btn { display: none; }

	#services { padding: 70px 0 10px 0; }
	.blocks .block h3 { margin-right: 52px; }
	.blocks .block h3 .btn { height: 50px; font-size: 18px; line-height: 50px; }
	.blocks .block h3 .btn .flippety,
	.blocks .block h3 .btn .flop { padding: 0 10px; }
	.blocks .block h3 .btn .flippety {
		-webkit-transform: translateZ(25px); 
		    -ms-transform: translateZ(25px); 
		     -o-transform: translateZ(25px); 
		        transform: translateZ(25px); 
	}

	.blocks .block .block-icon { height: 50px; width: 50px; background-size: 152px 50px; }
	.blocks .block-webdesign .block-icon { background-position: -52px 0; }
	.blocks .block-applications .block-icon { background-position: -102px 0; }
	.blocks .block .block-cnt { padding: 20px; font-size: 16px; line-height: 28px; }

	.contact-text { bottom: 20px; right: 20px; left: 20px; font-size: 30px; line-height: 33px; }
	.contact-text a { color: #fff; }
	.contact-text a:hover { text-decoration: none; }

	.email-btn { height: 66px; }
	.email-btn .flippety,
	.email-btn .flop { padding: 0 10px; }

	.socials { top: 75px; font-size: 30px; line-height: 60px; }
	.socials a { height: 60px; width: 60px; }
	.socials a.cube:hover {
		background: #31b8e4; color: #fff;
		-webkit-transform: rotateY(0deg); 
		    -ms-transform: rotateY(0deg); 
		     -o-transform: rotateY(0deg); 
		        transform: rotateY(0deg); 
	}

	.webbie-1 { top: 298px; }
	.webbie-4 { top: 213px; }
	.webbie-2,
	.webbie-3,
	.webbie-5,
	.webbie-6 { display: none; }

	.pt-page-current .webbie-1,
	.pt-page-current .webbie-4 {
		-webkit-animation: none;
		animation: none;
		-o-animation: none;
	}

	.blocks .block .block-cnt { font-size: 14px; line-height: 20px; }
	.blocks .block .block-cnt ul li .tt-title { padding: 0; }
	.blocks .block .block-cnt ul li .tt-mobile { margin: 10px 0; }
	.blocks .block .block-cnt ul li .tt-content h5 { display: none; }
	.blocks .block .block-cnt ul li .tt-content .tt-text,
	.blocks .block .block-cnt ul li .tt-content .tt-img,
	.blocks .block .block-cnt ul li .tt-mobile .tt-content-left,
	.blocks .block .block-cnt ul li .tt-mobile .tt-content-right { width: auto; float: none; }

	.error-page h3 { font-size: 18px; line-height: 22px; }
	.error-image { width: 100px; margin: 0 auto 20px auto; }

	.popup-header { padding: 10px 20px 15px 20px; }
	.popup-header h3 { font-size: 30px; line-height: 35px; }
	.popup-content { padding: 20px; font-size: 15px; line-height: 20px; }
}

@media only screen and (max-width: 479px) {
	.boxes .box { width: 100%; padding-top: 100%; }
}