/* GENERAL STYLES *********************************************************************/

* { 
	font-family: 'Montserrat', sans-serif; 
}

a, 
a:link, 
a:visited {
	color: rgba(0,0,0,.4);
}

	a:hover {
		text-decoration: none;
	}

body {
	min-height: 2000px;
	padding-top: 72px;
	font-size: 16px;
}

h1, h2, h3, h4, h5, h6, .h1, 
.h2, .h3, .h4, .h5, .h6  { 
	font-family: 'Montserrat', sans-serif; 
	line-height: 1.3; 
}

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


.btn {
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 25px 80px;
	display: inline-block;
	margin: 15px 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

	.btn:after {
		content: '';
		position: absolute;
		z-index: -1;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}

.icon-arrow-right:before {
	content: "\2192";
	margin-top: 3px; 
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.btn-4, 
a.btn-4, 
a.btn-4:visited, 
a.btn-4:link {
	border-radius: 50px;
	border: 3px solid #fff;
	color: #fff;
	overflow: hidden;
}

.btn-4:active {
	border-color: #fff;
	color: #fff;
}

	.btn-4:hover {
		background: rgba(0,0,0,0.1);
		color:#fff;
	}

.btn-4:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #fff;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
	
	.btn-4:active:before {
		color: #17954c;
	}

.btn-4a:before {
	left: 130%;
	top: 0;
}

	.btn-4a:hover:before {
		left: 80%;
	}

.container {
	max-width: 100%; 
	padding: 0; 
}
.container > .navbar-header {
	margin-left: 15px;
}

.navbar-brand { 
	padding: 5px; 
}

	.navbar-brand img {
		max-width: 190px; 
		margin-top: 5px;
	}
	
	.navbar-toggle {
		margin-top: 20px; 
		margin-right: 35px; 
		}
	
	.navbar-default {
		z-index: 100001; 
		margin: 0;
	}
	
	.nav > li > a {
		padding-right: 10px;
		padding-left: 10px; 
	}
	
	.navbar-default .navbar-nav > li > a:hover,
	.navbar-default .navbar-nav > li > a:focus {
	 	color: #1b3664;  
	}

footer {
	background: #333;
	padding: 20px 10%;
	text-align: right;
	color: #666;
	font-size: 12px;
	font-style: italic;
}

	footer p {
		margin-bottom:0; 
	}
	
	footer a,
	footer a:visited,
	footer a:link {
		color: rgba(255,255,255,.4);
	}

blockquote.pull-right {
	border:none;
}

blockquote.pull-right small:after {
	content: '';
}


/* SECTION EDIRECTORY *********************************************************************/

section#edirectory { 
	background: rgb(54, 177, 197);
	-webkit-transition: all 750ms linear;
	-moz-transition: all 750ms linear;
	-o-transition: all 750ms linear;
	-ms-transition: all 750ms linear;
	transition: all 750ms linear;
	padding: 9em 10% 0em;
}

	section#edirectory img {
		position: relative;
		margin-top: -105px;
		max-width: 1100px;
		-webkit-animation: moveFromBottom 1500ms ease-in-out;
		-moz-animation: moveFromBottom 1500ms ease-in-out;
		-ms-animation: moveFromBottom 1500ms ease-in-out;
	}	
	
	section#edirectory .btn {
		margin-top: 30px; 
	}
	
	


/* SECTION RECURSOS *********************************************************************/

section#recursos {
	background: #ddd;
	height: auto; 
	overflow: hidden; 
}

	section#recursos h2 {
		color: #333; 
	}

	section#recursos .item {
	}
	
		section#recursos .item h3 {
			color: #333;
			font-size: 24px;
			font-weight: 700;
		}
		
		section#recursos .btn-features {
			display: block;
			width: auto;
			height: auto;
			border-radius: 50%;
			background: #999;
			color: #fff;
			text-align: center;
			font-size: 2em;
			margin: 0 auto;
			padding: 30px 40px;
			font-weight: 300;
			clear: both;
			position: absolute;
			bottom: 0;
			left: 48%;
			z-index: 100;
			
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-ms-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}
		
			section#recursos .btn-features:hover {
				background: #bbb;
			}
		
		section#recursos .arrow-more {
			background: url(../images/arrow-more.png) no-repeat 100% 100%;
			position: absolute;
			bottom: 80px;
			left: 35%;
			padding: 60px 80px 0 0;
			color: #999;
			font-weight: bold;
		}

	section#recursos .item p {
		font-size: 1em;
	}



section#usos h2 {
	font-size: 59px;
	margin-bottom: 60px;
}

.lista-de-usos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.lista-de-usos li {
	list-style-type: none;
	margin-right: 50px;
	margin-bottom: 40px;
}

.lista-de-usos li .fas, .lista-de-usos li .far {
	color: #fff;
	font-size: 40px;
	margin-bottom: 5px;
}

.lista-de-usos li a {
	display: flex;
	flex-direction: column;
}

.lista-de-usos p {
	font-size: 16px;
	color: #fff;
}

/* SECTION HOW IT WORKS *********************************************************************/

section#howitworks {
	/*background: rgb(244, 119, 35);*/
	background:#fff;
	padding: 5em 10% 5em; 
	
	/*
	-webkit-animation-name: float;
	-webkit-animation-duration: 60s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: float;
	-moz-animation-duration: 60s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	background-image: url(../images/clouds.png);
	*/
}

	section#howitworks h2 {
		color: #333;
		background: #fff;
		z-index: 10;
		position: relative;
		display: inline;
		padding: 0 10px;
	}
	
	.dots-line {
		background-image: url(../images/dots-line-down.png);
		background-repeat: no-repeat;
		background-position: 70% 100%;
		width: 442px;
		display: block;
		height: 253px;
		position: absolute;
		right: 3%;
		bottom: 5%;
	}


section#howitworks-steps{
	height:600px;
	border-bottom: 1px solid #eee;
}



/* SECTION REQUIRED *********************************************************************/

section#required {
	background: #fff;
	position: relative; 
	padding: 7em 10% 0em;
}

	section#required h2 {
		color: #1b3664; 
	}

	section#required .column-steps {
		font-size: 0;
	}
	
		section#required .column-steps img
		{
			max-width: 70%;
		}



/* SECTION ABOUT *********************************************************************/

section#about {
	background:rgb(48, 134, 148); 
	padding: 5em 10% 9em;
}

	section#about p {
		color: rgba(255,255,255,0.7);
	}
	
		section#about p a,
		section#about p a:visited,
		section#about p a:link,
		section#about p strong {
			color: rgba(255,255,255,0.7);
		}
		
		section#about p a:hover {
			color: rgba(255,255,255,0.8);
		}
		
	.flip-up {
		background: url(../images/bg-flipup.png) no-repeat 0 0;
		position: absolute;
		bottom: 27px;
		right: 22px;
		width: 252px;
		height: 284px;
		z-index: 100;
		font-size: 16px;
		padding: 90px 45px 0;
	}
		
	.tie {
		background: url(../images/bg-tie.png) no-repeat 0 0;
		font-size: 16px;
		position: absolute;
		top: -100px;
		left: 30px;
		width: 342px;
		height: 232px;
		padding: 55px 50px 0 20px;
	}




/* SECTION CLIENTS *********************************************************************/

section#clientes {
	background: rgb(253, 189, 23);
	padding: 3em 10% 9em;
}

	section#clientes p {
		margin-bottom: 70px; 
	}
	
	section#clientes .col-md-2,
	section#clientes .col-md-3 {
		line-height: 140px;
		min-height: 140px;
	}
	
		section#clientes .col-md-2 img,
		section#clientes .col-md-3 img {
			max-width: 100%;
		}
	



/* SECTION TESTIMONIAL *********************************************************************/

section#testimonial{ 
	background: rgb(243, 239, 232); 
	padding: 5em 20%;
	height: auto;
	overflow: hidden;
	color: #444;
	font-size: 16px;
}
	
	section#testimonial img {
		margin-bottom:20px; 
	}

	.testimonial-info {
		margin-right: 3%;
		text-align: center;
		float: left; 
	}
	
		.testimonial-info h2 {
			display: block;
			font-size: 24px;
			font-weight: bold;
			padding: 3px 0;
			color: #1b3664;
			font-style: normal; 
			margin:0; 
		}
	
		.testimonial-info span {
			display: inline-block;
			-moz-opacity: 0.7;
			-khtml-opacity: 0.7;
			-webkit-opacity: 0.7;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
			filter: alpha(opacity=70);
			opacity: 0.7;  
			font-size: 70%;
		}
	
		section#testimonial .quote {
			font-size: 70px;
			line-height: 1;
			opacity: 0.5;
			position: relative;
			top: 15px;
		}
	
			section#testimonial .quote:before {
				content: "\201C"; 
			}
			
	


/* SECTION PRICE *********************************************************************/

section#price {
	background: rgb(2, 30, 47); 
}

	section#price p {
		color: rgba(255,255,255,.5); 
	}
	
	#price .btn {
		margin: 60px 0 0;
		color: #FFF;
	}
	
		#price .btn:hover {
			background-color: #032c45; 
			color: #fff; 
		}
	
	section#price .col-md-8 {
		padding-left: 50px; 
	}
	
	section#price .price-box {
		background: rgba(0,0,0,0.2);
		border-radius: 50%;
		height: 250px;
		width: 250px;
		font-size: 2em;
		float: left;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		cursor:pointer;
	}
	
			section#price .price-box:hover {
			-webkit-transform: scale(1.1);
			-moz-transform: scale(1.1);
			-ms-transform: scale(1.1);
			-o-transform: scale(1.1);
			transform: scale(1.1);
			}
	
		section#price .price-box h5 {
			padding-top: 60px;
			margin: 0;
		}
		
		section#price .price-box p {
			color: rgba(255,255,255,.9);
			margin:0; 
		}
		
		section#price .price-box p.value {
			font-weight: 700;
			padding-bottom: 40px;
		}
		
			section#price .price-box p.value small {
				font-weight: 300;
				font-size: 70%; 
			}
			
			section#price .price-box span {
				color: rgba(255,255,255,0.5);
				font-size: 12px;
				font-style:italic; 
				display:block;
			}
			
	section#price .box1 {
		margin: 15px 0px 0 30px;
	}
	
	section#price .box2 {
		margin: 15px 0px 0 -30px;
	}
	
	section#price .box3 {
		margin: 15px 0px 0 40px;
		z-index: 10;
		position: relative;
		background: rgba(0,0,0,0.4);
	}

	.d-flex {
		display: flex;
		justify-content: center;
	}

	





/* SECTION CONTACT *********************************************************************/

section#contact { 
	background: #eee;
	text-align: left; 
	padding: 5em 10%;
}

	section#contact h2 {
		color: #333; 
	}
	
	section#contact h3 {
		color: #777; 
		margin-bottom: 30px; 
	}
	
	section#contact h4 {
		color: #666; 
		font-size: 20px; 
	}
	
	section#contact p,
	section#contact address p {
		font-size: 15px; 
	}

	section#contact form {
	}
	
		section#contact label {
			color: #666; 
			font-weight: 300; 
		}
		
	section#contact .map {
		margin: 20px auto 40px; 
	}
	
	section#contact .form-control {
		border: 1px solid #ddd; 
		border-radius: 0; 
		-webkit-border-radius: 0; 
		-moz-border-radius: 0; 
		-webkit-box-shadow: none; 
		-moz-box-shadow: none; 
		box-shadow: none; 
	}
	
	section#contact .btn {
		background: #1b3664; 
		border: 3px solid #1b3664;  
		margin: 20px 0 0; 
	}
	
		section#contact .btn:hover {
			background:#eee;
			color:#1b3664; 
		}
		
		section#contact .btn::before {
			color: #1b3664; 
			line-height: 3.1;
		}
	
	section#contact address p {
		margin-bottom: 5px; 
	}
	
	section#contact .pull-right {
		font-size: 16px;
		margin-top: 30px;
		
	}
	
		section#contact .pull-right a,
		section#contact .pull-right a:visited {
			color: #2980b9;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}
		
		section#contact .pull-right a:hover {
			color: #2e8ecd;
			text-decoration: none;
		}
	




@-webkit-keyframes float {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 1200px 0;
	}
}

@-webkit-keyframes moveFromLeft{
    from {
        -webkit-transform: translateX(-100%);
    }
    to {
        -webkit-transform: translateX(0%);
    }
}
@-moz-keyframes moveFromLeft{
    from {
        -moz-transform: translateX(-100%);
    }
    to {
        -moz-transform: translateX(0%);
    }
}
@-ms-keyframes moveFromLeft{
    from {
        -ms-transform: translateX(-100%);
    }
    to {
        -ms-transform: translateX(0%);
    }
}

@-webkit-keyframes moveFromRight {
    from {
        -webkit-transform: translateX(100%);
    }
    to {
        -webkit-transform: translateX(0%);
    }
}
@-moz-keyframes moveFromRight {
    from {
        -moz-transform: translateX(100%);
    }
    to {
        -moz-transform: translateX(0%);
    }
}
@-ms-keyframes moveFromRight {
    from {
        -ms-transform: translateX(100%);
    }
    to {
        -ms-transform: translateX(0%);
    }
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(100%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(100%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}

@-webkit-keyframes smallToBig{
    from {
        -webkit-transform: scale(0.1);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes smallToBig{
    from {
        -moz-transform: scale(0.1);
    }
    to {
        -moz-transform: scale(1);
    }
}
@-ms-keyframes smallToBig{
    from {
        -ms-transform: scale(0.1);
    }
    to {
        -ms-transform: scale(1);
    }
}
@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromTop {
    from {
        opacity: 0;
        -moz-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromTop {
    from {
        opacity: 0;
        -ms-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}

.grecaptcha-badge {
	width: 70px!important;
	overflow: hidden!important;
	transition: all .3s ease!important;
	left: 0!important;
}

/* GENERAL STYLES *********************************************************************/

.container {
	overflow: hidden;
}

	.container svg {
		display: block;
	}

	.container > header {
		color: #fff;
		background: #3498db;
	}
	
	.container > header {
		margin: 0 auto;
		padding: 5em 2em 4em;
		text-align: center;
		background:#eee;
		
	}
	
		.container > header h1 {
			font-size: 6em;
			line-height: 1.3;
			margin: 0;
			font-weight: bold;
			color: #1b3664;
		}
		
		.container > header span {
			display: block;
			font-size: 50%;
			opacity: 0.7;
			padding: 0 0 0.6em 0.1em;
			font-weight: 300;
		}
		
		.container > header a,
		.container > header a:visited,
		.container > header a:link {
			color:#1b3664;
		}

section {
	position: relative;
	padding: 7em 10%;
	background: #2980b9;
	color: #fff;
	text-align: center;
}

	section h2 {
		margin: 0 0 20px;
		padding: 0;
		font-size: 5em;
		font-weight: bold;
		letter-spacing: -2px;
	}
	
	section p {
		color: rgba(0,0,0,.7);
		line-height: 1.5;
		font-size: 1.3em;
	}
	
		section p strong,
		section p a,
		section p a:visited,
		section p a:link {
			font-weight: 600;
			color: rgba(0,0,0,.7);
		}
		
			section p a:hover {
				color: rgba(0,0,0,.4);
			}
	
	.col-2 .column {
		width: 49%;
	}
	
	.col-3 .column {
		padding: 0 1%;
		width: 33%;
		text-align: center;
	}
		
		.col-3 .column p {
			padding: 1.4em;
		}
	
	.column {
		display: inline-block;
		vertical-align: top;
	}
	
	


/* INDIVIDUAL STYLES *********************************************************************/

section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}


/* TRIANGLES */

.ss-style-triangles::before,
.ss-style-triangles::after {
	left: 50%;
	width: 65px;
	height: 65px;
	-webkit-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
}

.ss-style-triangles::before {
	bottom: -25px;
	z-index: 10;
	background: rgb(54, 177, 197);
}

.ss-style-triangles::after {
	top: -40px;
	background: #eee;
}


/* DOUBLE DIAGONAL LINE */

.ss-style-doublediagonal {
	z-index: 1;
	padding-top: 8em;
	background: #2072a7;
}
	
	.ss-style-doublediagonal::before,
	.ss-style-doublediagonal::after {
		top: 0;
		left: -25%;
		z-index: -1;
		width: 150%;
		height: 75%;
		background: inherit;
		-webkit-transform: rotate(-2deg);
		transform: rotate(-2deg);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}
	
	.ss-style-doublediagonal::before {
		height: 50%;
		background: #CCC;
		-webkit-transform: rotate(-3deg);
		transform: rotate(-3deg);
		-webkit-transform-origin: 3% 0;
		transform-origin: 3% 0;
	}
	

/* BIG TRIANGLE */

svg#bigTriangleColor {
	pointer-events: none;
}

	#bigTriangleColor path {
		fill: #FFF;
		stroke: #FFF;
		stroke-width: 2;
	}


/* MULTIPLE TRIANGLES */

.ss-style-multitriangles::before,
.ss-style-multitriangles::after {
	left: 50%;
	width: 50px;
	height: 50px;
	-webkit-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
}

	.ss-style-multitriangles::before {
		top: -25px;
		background: inherit;
		box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
	}
	
	.ss-style-multitriangles::after {
		bottom: -25px;
		z-index: 10;
		background: inherit;
		box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
	}


/* ROUNDED CENTER SPLIT */

.ss-style-roundedsplit {
	padding-top: 7em;
	border-radius: 0;
}

	.ss-style-roundedsplit::before,
	.ss-style-roundedsplit::after {
		top: -70px;
		left: 0;
		z-index: 10;
		width: 50%;
		height: 70px;
		background: inherit;
	}
	
	.ss-style-roundedsplit::before {
		border-radius: 0 80px 0 0;
	}
	
	.ss-style-roundedsplit::after {
		left: 50%;
		border-radius: 80px 0 0 0;
	}


/* BOXES */

.ss-style-boxes {
	padding-top: 4em;
	padding-bottom: 13em;
}

	.ss-style-boxes::before {
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, #3498db), color-stop(0.5, #2980b9));
		background-image: linear-gradient(to right, #3498db 50%, #2980b9 50%);
		-webkit-background-size: 130px 100%;
		background-size: 130px 100%;
	}


/* FOLDED CORNER */

.ss-style-foldedcorner::before,
.ss-style-foldedcorner::after {
	bottom: 0;
	width: 100px;
	height: 100px;
}

	.ss-style-foldedcorner::before {
		right: 0;
		background-image: -webkit-linear-gradient(top left, #CCC 50%, #eee 50%);
		background-image: linear-gradient(315deg, #eee 50%, #ccc 50%);
	}
	
	.ss-style-foldedcorner::after {
		right: 100px;
		background-image: -webkit-linear-gradient(top left, transparent 50%, #032c45 50%);
		background-image: linear-gradient(315deg, #032c45 50%, transparent 50%);
	}


/* DOTS */

.ss-style-dots::before {
	bottom: 20px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background: #2072a7;
	box-shadow: 30px 0 #2072a7, -30px 0 #2072a7;
}


/* DOUBLE LINE */

.ss-style-doubleline::before {
	bottom: 30px;
	width: 140px;
	height: 2px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background: #2072a7;
	box-shadow: 0 30px 0 #2072a7;
}



/* CROSS */

.ss-style-cross {
	padding-bottom: 15em;
}

	.ss-style-cross::before,
	.ss-style-cross::after {
		background: #2072a7;
		bottom: 70px;
		width: 200px;
		height: 2px;
		left: 50%;
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}
	
	.ss-style-cross::before {
		-webkit-transform: translateX(-50%) rotate(45deg);
		transform: translateX(-50%) rotate(45deg);
	}
	
	.ss-style-cross::after {
		-webkit-transform: translateX(-50%) rotate(-45deg);
		transform: translateX(-50%) rotate(-45deg);
	}



/* Cross */
.ss-style-cross {
	padding-top: 15em;
}

.ss-style-cross::before {
	background: #2072a7;
	bottom: 70px;
	width: 200px;
	height: 2px;
	left: 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	
	-webkit-transform: translateX(-50%) rotate(-45deg);
	transform: translateX(-50%) rotate(-45deg);
}


/* RESPONSIVE *********************************************************************/

@media screen and (max-width: 68em) {
	section,
	header {
		font-size: 80%;
	}

	section#recursos .item p {
		font-size: 1.3em;
	}
}


@media screen and (max-width: 54em) {
	.column {
		display: block;
		width: 100% !important;
	}

		.col-2 .column:first-child .icon {
			margin: 0 auto 50px;
		}
	
		.col-2 .column:nth-child(2) .icon {
			margin: 50px auto 0;
		}
}


/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-effect-1 a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
.cl-effect-2 a {
	line-height: 44px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
}

.cl-effect-2 a span {
	position: relative;
	display: inline-block;
	padding: 0 14px;
	background: #2195de;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.csstransforms3d .cl-effect-2 a span::before {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0965a0;
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
	background: #28a2ee;	
}

/* Effect 3: bottom line slides/fades in */
.cl-effect-3 a {
	padding: 8px 0;
}

.cl-effect-3 a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: rgba(0,0,0,0.1);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.cl-effect-3 a:hover::after,
.cl-effect-3 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

/* Effect 4: bottom border enlarge */
.cl-effect-4 a {
	padding: 0 0 10px;
}

.cl-effect-4 a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: height 0.3s, opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect-4 a:hover::after,
.cl-effect-4 a:focus::after {
	height: 5px;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

/* Effect 5: same word slide in */
.cl-effect-5 a {
	overflow: hidden;
	padding: 0 4px;
	height: 1em;
}

.cl-effect-5 a span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.cl-effect-5 a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	font-weight: 700;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.cl-effect-5 a:hover span,
.cl-effect-5 a:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

/* Effect 5: same word slide in and border bottom */
.cl-effect-6 a {
	margin: 0 10px;
	padding: 10px 20px;
}

.cl-effect-6 a::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	content: '';
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	transition: top 0.3s;
}

.cl-effect-6 a::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 2px;
	background: #fff;
	content: '';
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	transition: height 0.3s;
}

.cl-effect-6 a:hover::before {
	top: 100%;
	opacity: 1;
}

.cl-effect-6 a:hover::after {
	height: 100%;
} 

/* Effect 7: second border slides up */
.cl-effect-7 a {
	padding: 12px 10px 10px;
	color: #566473;
	text-shadow: none;
	font-weight: 700;
}

.cl-effect-7 a::before,
.cl-effect-7 a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 3px;
	background: #566473;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	transform: scale(0.85);
}

.cl-effect-7 a::after {
	opacity: 0;
	-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: top 0.3s, opacity 0.3s, transform 0.3s;
}

.cl-effect-7 a:hover::before,
.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::before,
.cl-effect-7 a:focus::after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}

.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::after {
	top: 0%;
	opacity: 1;
}

/* Effect 8: border slight translate */
.cl-effect-8 a {
	padding: 10px 20px;
}

.cl-effect-8 a::before,
.cl-effect-8 a::after  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #354856;
	content: '';
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-8 a::after  {
	border-color: #fff;
	opacity: 0;
	-webkit-transform: translateY(-7px) translateX(6px);
	-moz-transform: translateY(-7px) translateX(6px);
	transform: translateY(-7px) translateX(6px);
}

.cl-effect-8 a:hover::before,
.cl-effect-8 a:focus::before {
	opacity: 0;
	-webkit-transform: translateY(5px) translateX(-5px);
	-moz-transform: translateY(5px) translateX(-5px);
	transform: translateY(5px) translateX(-5px);
}

.cl-effect-8 a:hover::after,
.cl-effect-8 a:focus::after  {
	opacity: 1;
	-webkit-transform: translateY(0px) translateX(0px);
	-moz-transform: translateY(0px) translateX(0px);
	transform: translateY(0px) translateX(0px);
}

/* Effect 9: second text and borders */
.cl-effect-9 a {
	margin: 0 20px;
	padding: 18px 20px;
}

.cl-effect-9 a::before,
.cl-effect-9 a::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	content: '';
	opacity: 0.2;
	-webkit-transition: opacity 0.3s, height 0.3s;
	-moz-transition: opacity 0.3s, height 0.3s;
	transition: opacity 0.3s, height 0.3s;
}

.cl-effect-9 a::after {
	top: 100%;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect-9 a span:first-child {
	z-index: 2;
	display: block;
	font-weight: 300;
}

.cl-effect-9 a span:last-child {
	z-index: 1;
	display: block;
	padding: 8px 0 0 0;
	color: rgba(0,0,0,0.4);
	text-shadow: none;
	text-transform: none;
	font-style: italic;
	font-size: 0.75em;
	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

.cl-effect-9 a:hover::before,
.cl-effect-9 a:focus::before {
	height: 6px;
}

.cl-effect-9 a:hover::before,
.cl-effect-9 a:hover::after,
.cl-effect-9 a:focus::before,
.cl-effect-9 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.cl-effect-9 a:hover span:last-child,
.cl-effect-9 a:focus span:last-child {
	opacity: 1;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

/* Effect 10: reveal, push out */
.cl-effect-10  {
	position: relative;
	z-index: 1;
}

.cl-effect-10 a {
	overflow: hidden;
	margin: 0 15px;
}

.cl-effect-10 a span {
	display: block;
	padding: 10px 20px;
	background: #0f7c67;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.cl-effect-10 a::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 10px 20px;
	width: 100%;
	height: 100%;
	background: #fff;
	color: #0f7c67;
	content: attr(data-hover);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: translateX(-25%);
}

.cl-effect-10 a:hover span,
.cl-effect-10 a:focus span {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}

.cl-effect-10 a:hover::before,
.cl-effect-10 a:focus::before {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}

/* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
.cl-effect-11 a {
	padding: 10px 0;
	border-top: 2px solid #0972b4;
	color: #0972b4;
	text-shadow: none;
} 

.cl-effect-11 a::before {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	padding: 10px 0;
	max-width: 0;
	border-bottom: 2px solid #fff;
	color: #fff;
	content: attr(data-hover);
	-webkit-transition: max-width 0.5s;
	-moz-transition: max-width 0.5s;
	transition: max-width 0.5s;
}

.cl-effect-11 a:hover::before,
.cl-effect-11 a:focus::before {
	max-width: 100%;
}

/* Effect 12: circle */
.cl-effect-12 a::before,
.cl-effect-12 a::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

.cl-effect-12 a::after {
	width: 90px;
	height: 90px;
	border-width: 6px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.cl-effect-12 a:hover::before,
.cl-effect-12 a:hover::after,
.cl-effect-12 a:focus::before,
.cl-effect-12 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}

/* Effect 13: three circles */
.cl-effect-13 a {
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.cl-effect-13 a::before {
	position: absolute;
	top: 100%;
	left: 50%;
	color: transparent;
	content: '•';
	text-shadow: 0 0 transparent;
	font-size: 1.2em;
	-webkit-transition: text-shadow 0.3s, color 0.3s;
	-moz-transition: text-shadow 0.3s, color 0.3s;
	transition: text-shadow 0.3s, color 0.3s;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
	pointer-events: none;
}

.cl-effect-13 a:hover::before,
.cl-effect-13 a:focus::before {
	color: #fff;
	text-shadow: 10px 0 #fff, -10px 0 #fff;
}

.cl-effect-13 a:hover,
.cl-effect-13 a:focus {
	color: #ba7700;
}

/* Effect 14: border switch */
.cl-effect-14 a {
	padding: 0 20px;
	height: 45px;
	line-height: 45px;
}

.cl-effect-14 a::before,
.cl-effect-14 a::after {
	position: absolute;
	width: 45px;
	height: 2px;
	background: #fff;
	content: '';
	opacity: 0.2;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	pointer-events: none;
}

.cl-effect-14 a::before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
}

.cl-effect-14 a::after {
	right: 0;
	bottom: 0;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 100% 0;
	-moz-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

.cl-effect-14 a:hover::before,
.cl-effect-14 a:hover::after,
.cl-effect-14 a:focus::before,
.cl-effect-14 a:focus::after {
	opacity: 1;
}

.cl-effect-14 a:hover::before,
.cl-effect-14 a:focus::before {
	left: 50%;
	-webkit-transform: rotate(0deg) translateX(-50%);
	-moz-transform: rotate(0deg) translateX(-50%);
	transform: rotate(0deg) translateX(-50%);
}

.cl-effect-14 a:hover::after,
.cl-effect-14 a:focus::after {
	right: 50%;
	-webkit-transform: rotate(0deg) translateX(50%);
	-moz-transform: rotate(0deg) translateX(50%);
	transform: rotate(0deg) translateX(50%);
}

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
	color: rgba(0,0,0,0.2);
	font-weight: 700;
	text-shadow: none;
}

.cl-effect-15 a::before {
	color: #fff;
	content: attr(data-hover);
	position: absolute;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0;
}

/* Effect 16: fall down */
.cl-effect-16 a {
	color: #6f8686;
	text-shadow: 0 0 1px rgba(111,134,134,0.3);
}

.cl-effect-16 a::before {
	color: #fff;
	content: attr(data-hover);
	position: absolute;
	opacity: 0;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	-webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-16 a:hover::before,
.cl-effect-16 a:focus::before {
	-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	-moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	opacity: 1;
}

/* Effect 17: move up fade out, push border */
.cl-effect-17 a {
	color: #10649b;
	text-shadow: none;
	padding: 10px 0;
}

.cl-effect-17 a::before {
	color: #fff;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	content: attr(data-hover);
	position: absolute;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-17 a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	opacity: 0;
	-webkit-transform: translateY(5px);
	-moz-transform: translateY(5px);
	transform: translateY(5px);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-17 a:hover::before,
.cl-effect-17 a:focus::before {
	opacity: 0;
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	transform: translateY(-2px);
}

.cl-effect-17 a:hover::after,
.cl-effect-17 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

/* Effect 18: cross */
.cl-effect-18 {
	position: relative;
	z-index: 1;
}

.cl-effect-18 a {
	padding: 0 5px;
	color: #b4770d;
	font-weight: 700;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.cl-effect-18 a::before,
.cl-effect-18 a::after {
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: #b4770d;
	content: '';
	z-index: -1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-18 a::before {
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	transform: translateY(-20px);
}

.cl-effect-18 a::after {
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	transform: translateY(20px);
}

.cl-effect-18 a:hover,
.cl-effect-18 a:focus {
	color: #fff;
}

.cl-effect-18 a:hover::before,
.cl-effect-18 a:hover::after,
.cl-effect-18 a:focus::before,
.cl-effect-18 a:focus::after {
	opacity: 0.7;
}

.cl-effect-18 a:hover::before,
.cl-effect-18 a:focus::before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.cl-effect-18 a:hover::after,
.cl-effect-18 a:focus::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* Effect 19: 3D side */
.cl-effect-19 a {
	line-height: 2em;
	margin: 15px;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;
	width: 200px;
}

.cl-effect-19 a span {
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 0 14px;
	background: #e35041;
	-webkit-transition: -webkit-transform 0.4s, background 0.4s;
	-moz-transition: -moz-transform 0.4s, background 0.4s;
	transition: transform 0.4s, background 0.4s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -100px;
	-moz-transform-origin: 50% 50% -100px;
	transform-origin: 50% 50% -100px;
}

.csstransforms3d .cl-effect-19 a span::before {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	background: #b53a2d;
	content: attr(data-hover);
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	transition: background 0.4s;
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: 0 50%;
	-moz-transform-origin: 0 50%;
	transform-origin: 0 50%;
	pointer-events: none;
}

.cl-effect-19 a:hover span,
.cl-effect-19 a:focus span {
	background: #b53a2d;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
}

.csstransforms3d .cl-effect-19 a:hover span::before,
.csstransforms3d .cl-effect-19 a:focus span::before {
	background: #ef5e50;	
}

/* Effect 20: 3D side */
.cl-effect-20 a {
	line-height: 2em;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;
}

.cl-effect-20 a span {
	position: relative;
	display: inline-block;
	padding: 3px 15px 0;
	background: #587285;
	box-shadow: inset 0 3px #2f4351;
	-webkit-transition: background 0.6s;
	-moz-transition: background 0.6s;
	transition: background 0.6s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}

.cl-effect-20 a span::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	color: #2f4351;
	content: attr(data-hover);
	-webkit-transform: rotateX(270deg);
	-moz-transform: rotateX(270deg);
	transform: rotateX(270deg);
	-webkit-transition: -webkit-transform 0.6s;
	-moz-transition: -moz-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	pointer-events: none;
}

.cl-effect-20 a:hover span,
.cl-effect-20 a:focus span {
	background: #2f4351;
}

.cl-effect-20 a:hover span::before,
.cl-effect-20 a:focus span::before {
	-webkit-transform: rotateX(10deg);	
	-moz-transform: rotateX(10deg);
	transform: rotateX(10deg);
}

/* Effect 21: borders slight translate */
.cl-effect-21 a {
	padding: 10px;
	color: #237546;
	font-weight: 700;
	text-shadow: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.cl-effect-21 a::before,
.cl-effect-21 a::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect-21 a::before {
	top: 0;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect-21 a::after {
	bottom: 0;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.cl-effect-21 a:hover,
.cl-effect-21 a:focus {
	color: #fff;
}

.cl-effect-21 a:hover::before,
.cl-effect-21 a:focus::before,
.cl-effect-21 a:hover::after,
.cl-effect-21 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}
.og-grid {
	list-style: none;
	padding: 20px 0;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

	.og-grid li {
		display: inline-block;
		margin: 10px 5px 0 5px;
		vertical-align: top;
		height: 250px;
	}

		.og-grid li > a,
		.og-grid li > a img {
			border: none;
			outline: none;
			display: block;
			position: relative;
		}

		.og-grid li > a:hover img {
			opacity: 0.85;
		}

	.og-grid li.og-expanded > a::after {
		top: auto;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-bottom-color: #2a7682;
		border-width: 15px;
		left: 50%;
		margin: -20px 0 0 -15px;
	}

	.og-expander {
		position: absolute;
		background: #2a7682;
		top: auto;
		left: 0;
		width: 100%;
		margin-top: 10px;
		text-align: left;
		height: 0;
		overflow: hidden;
	}

	.og-expander-inner {
		padding: 50px 30px;
		height: 100%;
	}
	
	.og-close {
		position: absolute;
		width: 40px;
		height: 40px;
		top: 20px;
		right: 20px;
		cursor: pointer;
	}

		.og-close::before,
		.og-close::after {
			content: '';
			position: absolute;
			width: 100%;
			top: 50%;
			height: 2px;
			background: #fff;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		.og-close::after {
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}
		
		.og-close:hover::before,
		.og-close:hover::after {
			background: #333;
		}

	.og-fullimg,
	.og-details {
		width: 50%;
		float: left;
		height: 100%;
		overflow: hidden;
		position: relative;
	}
	
	.og-details {
		padding: 0 40px 0 20px;
	}

		.og-fullimg {
			text-align: center;
		}
		
		.og-fullimg img {
			display: inline-block;
			max-height: 100%;
			max-width: 100%;
		}

		.og-details h3 {
			font-weight: 300;
			font-size: 3em;
			padding: 40px 0 10px;
			margin-bottom: 10px;
		}
		
		.og-details p {
			font-weight: 400;
			font-size: 1.5em;
			line-height: 1.5;
			color: #ddd;
		}

			.og-details a {
				margin: 30px 0 0;
				/*
				font-weight: 500;
				font-size: 16px;
				color: #fff;
				text-transform: uppercase;
				letter-spacing: 2px;
				padding: 10px 20px;
				border: 3px solid #fff;
				display: inline-block;
				outline: none;
				border-radius: 50px;
				-moz-border-radius: 50px;
				-webkit-border-radius: 50px;
				-webkit-transition: all 0.3s;
				-moz-transition: all 0.3s;
				transition: all 0.3s;
				*/
			}

		.og-details .btn-4:hover
		{ border: 3px solid #fff; background:#fff; color: rgb(48, 134, 148); }
		
		.og-details a::before {
			content: '\2192';
			display: inline-block;
			margin-right: 10px;
			color: rgb(48, 134, 148);
			margin-top: 3px;
		}
		
		.og-details a:hover {
			border-color: #999;
			color: #999;
		}

	.og-loading {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #ddd;
		box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -25px 0 0 -25px;
		-webkit-animation: loader 0.5s infinite ease-in-out both;
		-moz-animation: loader 0.5s infinite ease-in-out both;
		animation: loader 0.5s infinite ease-in-out both;
	}

@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@media screen and (max-width: 830px) {

	.og-expander h3 { font-size: 2em; }
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }

}

@media screen and (max-width: 650px) {

	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%;padding: 0; }
	
}

.sl-slider-wrapper {
	width: 800px;
	height: 400px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.sl-slider {
	position: absolute;
	top: 0;
	left: 0;
}

/* Slide wrapper and slides */

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
} 

.sl-slide {
	z-index: 1;
	display: none;
}

/* The duplicate parts/slices */

.sl-content-slice {
	overflow: hidden;
	position: absolute;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	/*background: #fff;*/
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity : 1;
}

/* Horizontal slice */

.sl-slide-horizontal .sl-content-slice {
	width: 100%;
	height: 50%;
	left: -200px;
	-webkit-transform: translateY(0%) scale(1);
	-moz-transform: translateY(0%) scale(1);
	-o-transform: translateY(0%) scale(1);
	-ms-transform: translateY(0%) scale(1);
	transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
	top: -200px;
	padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
	top: 50%;
	padding: 0px 200px 200px 200px;
}

/* Vertical slice */

.sl-slide-vertical .sl-content-slice {
	width: 50%;
	height: 100%;
	top: -200px;
	-webkit-transform: translateX(0%) scale(1);
	-moz-transform: translateX(0%) scale(1);
	-o-transform: translateX(0%) scale(1);
	-ms-transform: translateX(0%) scale(1);
	transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
	left: -200px;
	padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
	left: 50%;
	padding: 200px 200px 200px 0px;
}

/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
	position: absolute;
}

.sl-content {
	width: 100%;
	height: 100%;
	background: #fff;
}

/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
	background: #ddd;
	border-top: 7px solid rgba(0,0,0,0.1);
	border-bottom: 7px solid rgba(0,0,0,0.1);
}

.sl-slide-vertical .sl-slide-inner {
	background: #ccc;
	border-top: 7px solid rgba(0,0,0,0.1);
	border-bottom: 7px solid rgba(0,0,0,0.1);
}


.demo-1 .sl-slider-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/* Custom navigation arrows */

.nav-arrows span {
	position: absolute;
	z-index: 2000;
	top: 50%;
	width: 40px;
	height: 40px;
	border: 8px solid #ddd;
	border: 8px solid rgba(255,255,255,0.4);
	text-indent: -90000px;
	margin-top: -40px;
	cursor: pointer;
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.nav-arrows span:hover {
	border-color: rgba(255,255,255,0.9);
}

.nav-arrows span.nav-arrow-prev {
	left: 5%;
	border-right: none;
	border-top: none;
}

.nav-arrows span.nav-arrow-next {
	right: 5%;
	border-left: none;
	border-bottom: none;
}

/* Custom navigation dots */

.nav-dots {
	text-align: center;
	position: absolute;
	bottom: 2%;
	height: 30px;
	width: 100%;
	left: 0;
	z-index: 1000;
}

.nav-dots span {
	display: inline-block;
	position: relative;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin: 3px;
	background: #ddd;
	background: rgba(255,255,255,0.4);
	cursor: pointer;
}

.nav-dots span.nav-dot-current:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 3px;
	left: 3px;
	border-radius: 50%;
	background: rgba(255,255,255,0.8);
}

/* Content elements */

.demo-1 .deco {
	width: 260px;
	height: 260px;
	border: 2px dashed rgba(255,255,255,0.5);
	border-radius: 50%;
	position: absolute;
	bottom: 50%;
	left: 50%;
	margin: 0 0 0 -130px;
	font-size: 7em;
	line-height: 260px;
	color: #fff;
}

.demo-1 [data-icon]:after {
    content: attr(data-icon);
    font-family: 'AnimalsNormal';
	color: #fff;
	text-shadow: 0 0 1px #fff;
	position: absolute;
	width: 220px;
	height: 220px;
	line-height: 220px;
	text-align: center;
	font-size: 100px;
	top: 50%;
	left: 50%;
	margin: -110px 0 0 -110px;
	box-shadow: inset 0 0 0 10px rgba(255,255,255,0.8);
	border-radius: 50%;
}

.demo-1 .sl-slide h2 {
	color: #fff;
	padding: 0;
	position: absolute;
	font-weight: 700;
	font-size: 4.5em;
	width: 80%;
	left: 10%;
	text-align: center;
	line-height: 1;
	bottom: 50%;
	margin: 0 0 -120px 0;
}

.demo-1 .sl-slide h3 {
	position: absolute;
	width: 100%;
	text-align: center;
	left: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	height: 70px;
	color: #8b8b8b;
	z-index: 2;
	bottom: 50%;
	margin: 0 0 -200px 0;
	padding: 0;
}

.demo-1 .sl-slide h3 span{
	margin: 0 auto;
	width: 60%;
	max-width: 800px;
	position: relative;
	font-size: 1.5em;
	color: rgba(255,255,255,0.8);
	display: block;
	line-height: 1.5;
}

/* Custom background colors for slides in first demo */

/* First Slide */
.demo-1 .bg-0 .sl-slide-inner,
.demo-1 .bg-0 .sl-content-slice {
	background: #276cbd;

}/* First Slide */
.demo-1 .bg-1 .sl-slide-inner,
.demo-1 .bg-1 .sl-content-slice {
	background: #46b39c;
}

.demo-1 .bg-6 .sl-slide-inner,
.demo-1 .bg-6 .sl-content-slice {
	background: #d6ba03;
}

/* Second Slide */
.demo-1 .bg-2 .sl-slide-inner,
.demo-1 .bg-2 .sl-content-slice {
	background: #e17c3e;
}

.demo-1 .bg-2 h3:before {
	color: #e45136;
}

/* Third Slide */
.demo-1 .bg-3 .sl-slide-inner,
.demo-1 .bg-3 .sl-content-slice {
	background: #334d5c;
}

.demo-1 .bg-3 .deco {
	border-color: #fff;
	border-color: rgba(255,255,255,0.5);
	line-height: 250px;
}

.demo-1 .bg-3 [data-icon]:after {
	color: #fff;
	text-shadow: 0 0 1px #fff;
	box-shadow: inset 0 0 0 10px rgba(255,255,255,0.5);
}

.demo-1 .bg-3 h2,
.demo-1 .bg-3 h3{
	color: #fff;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

.demo-1 .bg-3 h3:before {
	color: #c46c96;
}

/* Forth Slide */
.demo-1 .bg-4 .sl-slide-inner,
.demo-1 .bg-4 .sl-content-slice {
	background: #e45136;
}

/* Fifth Slide */
.demo-1 .bg-5 .sl-slide-inner,
.demo-1 .bg-5 .sl-content-slice {
	background: #e45136;
}

.demo-1 .bg-5 .deco {
	border-color: #ECD82C;
}

.demo-1 .bg-5 .deco:after {
	color: #000;
	text-shadow: 0 0 1px #000;
}

.demo-1 .bg-5 h2,
.demo-1 .bg-5 h3{
	color: #000;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.demo-1 .bg-5 h3:before {
	color: #ecd82c;
}

.step-number
{ color: rgba(255,255,255,0.12);
font-size: 50em;
position: absolute;
right: 0;
top: 0;
line-height: 1;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
font-weight:700 }

/* Animations for content elements */

.sl-trans-elems .deco{
	-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h2{
	-webkit-animation: moveUp 1s ease-in-out both;
	-moz-animation: moveUp 1s ease-in-out both;
	-o-animation: moveUp 1s ease-in-out both;
	-ms-animation: moveUp 1s ease-in-out both;
	animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems h3{
	-webkit-animation: fadeIn 0.5s linear 0.5s both;
	-moz-animation: fadeIn 0.5s linear 0.5s both;
	-o-animation: fadeIn 0.5s linear 0.5s both;
	-ms-animation: fadeIn 0.5s linear 0.5s both;
	animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .deco{
	-webkit-animation: scaleDown 1s ease-in-out both;
	-moz-animation: scaleDown 1s ease-in-out both;
	-o-animation: scaleDown 1s ease-in-out both;
	-ms-animation: scaleDown 1s ease-in-out both;
	animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2{
	-webkit-animation: fadeOut 1s ease-in-out both;
	-moz-animation: fadeOut 1s ease-in-out both;
	-o-animation: fadeOut 1s ease-in-out both;
	-ms-animation: fadeOut 1s ease-in-out both;
	animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems h3{
	-webkit-animation: fadeOut 1s linear both;
	-moz-animation: fadeOut 1s linear both;
	-o-animation: fadeOut 1s linear both;
	-ms-animation: fadeOut 1s linear both;
	animation: fadeOut 1s linear both;
}
@-webkit-keyframes roll{
	0% {-webkit-transform: translateX(500px) rotate(360deg);}
	100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes roll{
	0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
	0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
	0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
	0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes moveUp{
	0% {-webkit-transform: translateY(40px);}
	100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes moveUp{
	0% {-moz-transform: translateY(40px);}
	100% {-moz-transform: translateY(0px);}
}
@-o-keyframes moveUp{
	0% {-o-transform: translateY(40px);}
	100% {-o-transform: translateY(0px);}
}
@-ms-keyframes moveUp{
	0% {-ms-transform: translateY(40px);}
	100% {-ms-transform: translateY(0px);}
}
@keyframes moveUp{
	0% {transform: translateY(40px);}
	100% {transform: translateY(0px);}
}
@-webkit-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-o-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-ms-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes scaleDown{
	0% {-webkit-transform: scale(1);}
	100% {-webkit-transform: scale(0.5);}
}
@-moz-keyframes scaleDown{
	0% {-moz-transform: scale(1);}
	100% {-moz-transform: scale(0.5);}
}
@-o-keyframes scaleDown{
	0% {-o-transform: scale(1);}
	100% {-o-transform: scale(0.5);}
}
@-ms-keyframes scaleDown{
	0% {-ms-transform: scale(1);}
	100% {-ms-transform: scale(0.5);}
}
@keyframes scaleDown{
	0% {transform: scale(1);}
	100% {transform: scale(0.5);}
}
@-webkit-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-moz-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-o-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-ms-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}


/* Media Queries for custom slider */

@media screen and (max-width: 660px) {
	
	section#howitworks-steps {
		height: 500px;
	}
	
	.demo-1 .deco {
		width: 130px;
		height: 130px;
		margin-left: -65px;
		margin-bottom: 50px;
		font-size: 5em;
		line-height: 120px;
	}

	.demo-1 [data-icon]:after {
		width: 110px;
		height: 110px;
		line-height: 110px;
		font-size: 40px;
		margin: -55px 0 0 -55px;
	}

	.demo-1 .sl-slide h3 {
		margin-bottom: -140px;
	}
	
	.demo-1 .sl-slide h3 span {
		font-size: 1em;
		max-width: inherit;
	}

	.demo-1 .sl-slide h2 {
		line-height: 1;
		font-size: 28px;
		margin-bottom: -50px;
		letter-spacing: 4px;
	}

	.demo-1 .sl-slide h3:before {
		line-height: 10px;
		width: 40px;
		height: 40px;
		font-size: 120px;
		left: -45px;
	}
	
	.demo-1 .bg-3 .deco {
			line-height: 120px; 
	}

}

/* RESPONSIVE *********************************************************************/	
	
	
@media (min-width: 768px) {
	
	.navbar-nav > li > a {
		padding-top: 25px;
		padding-bottom: 25px; 
	}
		
	section#price .price-box {
		height: 230px;
		width: 230px;
	}
	
	section#price .price-box p.value {
		padding-bottom: 20px;
	}

}

@media (max-width: 1100px) { 
	
	section#about p.tie {
		display:none;
	}
}


/* Large desktop */
@media (min-width: 1200px) { 

}


 
/* Portrait tablet to landscape and desktop */
@media (min-width: 767px) and (max-width: 978px) { 


/* SECTION REQUIRED ****/

	section#required .column-steps {
		margin-top: 20px;
		background-position: 50% 0;
		min-height: 620px;
	}
	
	
}


/* Landscape phone to portrait tablet */
@media (max-width: 868px) { 
 
	section#edirectory img {
		position: relative;
		margin-top: 0;
		max-width: 200%;
		z-index: 10;
	}

}
 
 
/* Landscape phone to portrait tablet */
@media (max-width: 768px) { 

	.navbar-nav > li > a {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	
/* SECTION EDIRECTORY ****/	

section#edirectory {
	max-height: inherit;
	padding: 9em 10% 7em;
}

	section#edirectory img {
		max-width: 100%;
		margin-top: 0;
	}
	
	

/* SECTION RECURSOS ****/

section#recursos {
}

	section#recursos h2 {
		margin-bottom: 40px;
	}
		
	section#recursos .arrow-more {
		bottom: 50px;
		left: 30%;
		font-size: 1.2em;
		background-size: 40%;
		padding-right: 60px;
	}
	
	section#recursos .btn-features {
		padding: 30px 35px
	}


/* SECTION HOW IT WORKS ****/

section#howitworks-steps {
}

	section#howitworks-steps .demo-1 .sl-slide h2 {
		font-size: 4em;
	}
	
	section#howitworks-steps .deco,
	section#howitworks-steps .demo-1 .bg-3 .deco {
		width: 160px;
		height: 160px;
		bottom: 60%;
		margin: 0 0 0 -80px;
		line-height: 160px;
	}

/* SECTION REQUIRED ****/

/* SECTION ABOUT ****/

section#about {
}

	section#about p.tie,
	section#about p.flip-up {
		display:none;
	}
	
	
/* SECTION CLIENTS ****/

/* SECTION TESTIMONIAL ****/

/* SECTION PRICE ****/

section#price  {
}

	section#price .price-box {
		height: 195px;
		width: 195px;
		font-size: 1em;
		margin-top: 20px;
	}

/* SECTION CONTACT ****/



}
 
@media (min-width: 767px) and (max-width: 768px)  {
	.navbar-nav > li > a {
		padding: 25px 0;
		font-size: 13px;
	}
}



 
/* Landscape phones and down */
@media (max-width: 480px) { 

body {
	padding-top: 73px;
}

.navbar-nav > li > a {
	padding-left: 15px;
	padding-right: 15px;
}

.btn {
	margin: 15px auto; 
}
	
.btn-4, 
a.btn-4, 
a.btn-4:visited, 
a.btn-4:link {
	width: 100%;
	padding: 25px 0;
	text-align: center;
}

.dots-line {
	display:none;;
}


/* SECTIONS ****/

section {
}

	section h2,
	.container > header h1 {
		font-size: 4em;
	}


/* SECTION EDIRECTORY ****/

section#edirectory {
	max-height: inherit;
	padding: 9em 10% 1em;
}
	
		section#edirectory img {
			top: 0; 
			max-width: 200%;
			z-index: 10;
		}
		
		.ss-style-triangles::before, 
		.ss-style-triangles::after {
			height: 40px;
			left: 47%;
		}
		
		.ss-style-triangles::before {
			bottom: 0;
		}
		

/* SECTION RECURSOS ****/

section#recursos {
}
	
	section#recursos .arrow-more {
		left: 5%;
	}


/* SECTION HOW IT WORKS ****/

section#required .column-steps img {
	max-width: 100%;
}

/* SECTION REQUIRED ****/

section#required  {
}

	section#required .column-steps {
		margin-top: 20px;
		min-height: 475px;
	}
	
	section#required p {
		word-wrap: break-word;
	}
	

/* SECTION ABOUT ****/

section#about {
}

	section#about p.tie,
	section#about p.flip-up {
		display:none;
	}
	

/* SECTION CLIENTS ****/


/* SECTION TESTIMONIAL ****/

section#testimonial {
}

	section#testimonial .testimonial-info {
		float:none; 
	}
	
	section#testimonial p {
		font-size: 1em; 
	}


/* SECTION PRICE ****/

section#price {
}

	section#price .price-box {
		margin: 30px auto 0; 
		float:none;
	}
	
	section#price .col-md-8 {
		padding:0;
		text-align:center;
	}
	
	section#price .btn {
		margin-bottom: 60px;
	}


/* SECTION CONTACT ****/

section#contact {
}

	section#contact .pull-right {
		font-size: 16px;
		margin-top: 0;
		float: none !important;
		clear: both;
		display: block;
		text-align: left; 
	}
	
	

}