/*
Author: Christian Dinglasan of Global Advanced IT Solutions
Author URL: http://www.gaitsol.com/
Version: 1.0

This CSS is exclusively written for Echo Pay Website, copying and distribution of this is prohibited.

/*



/*==================================RESETS AND OVERRIDES==================================*/
html, body {
    width: 100%;
    height: 100%;
}

input {
    outline: none;
}

input[type="text"], textarea {
	width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
	color: #666;
}


input[type="button"] {
	text-align: center;
    width: 300px;
    margin: auto;
	padding: 12px 80px;
	background: #1e7eb2;
	border:none;
	color: #fff;
	text-transform: uppercase;
	border-radius: 30px;
	font-size: 1.5em;
}


/*==================================LINKS AND TYPES==================================*/

a {
    color: #1e7eb2;
}

a:hover {
    opacity: 0.8;
}


hr {
    margin: 40px 0;
    border-top: 1px #ccc solid;
}


.blue-wrap hr {
    margin: 40px 0;
    border-top: 1px #fff solid;
}

.blue-wrap a {
    color: #fff;
}


.blue-wrap .col-3silo a .fa   {
    color: #fff;
}


.col-3silo a {
    text-decoration: underline
}



/*==================================TYPOGRAPHY==================================*/

/* WebKit Google Font fix */

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

body {
    font-family: 'Source Sans Pro', sans-serif;
}

h1, h2 {
    text-align: center;
    font-weight: 300;
}

h1 {
    text-transform: uppercase;
    text-align: center;
    font-size: 4em;
    margin: 0 0 60px 0;
    letter-spacing: 0.015em;
}

p, .col-3silo a {
    font-weight: 300;
    line-height: 1.5em;
    margin: 0 0 20px;
    font-size:16px;
}


.blue-wrap h1, .blue-wrap h2, .blue-wrap p {
    color: #fff;
}


.page-title-content h1, .page-title-content p {
 color: #fff;
 text-align: center;
}

.page-title-content h1 {
    margin: 100px 0 0 0;
}

.slider-content h1, .slider-content p {
    color: #fff;
    text-transform:none;
}

.page-title-content h1 {
    font-size: 4em;
}

.slider-content h1 {
    margin:120px 0 20px 0;
    font-size: 4em;
}

.slider-content p { 
    font-size: 2em;
    margin-bottom: 90px;
}

.container-wrap h1 {
    margin-bottom:20px;
}

.sb-slidebar {
    background:#fbfbfb !important; 
}

.sb-slidebar ul {
    padding: 0;
    margin: 0;

}

.sb-slidebar  ul li {
    border-bottom: 1px solid #ccc;
}

.sb-slidebar  ul li:hover {
   background: #eee;
}

#mobile-cta {
    border-bottom: none;    
}

#mobile-cta:hover {
    background: none;
}

#mobile-cta a {
    border: 1px solid #006699;
    border-radius: 30px;
    padding: 10px 30px;
    margin: 20px;
    display: block;
    text-align: center;
}

#mobile-cta a:hover {
    text-decoration: none;
}

.sb-slidebar  li a {
    display: inline-block;
    padding: 15px;
}

.sb-slidebar  li a:hover {
    text-decoration: none;
    opacity: 0.9;
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: none;
    font-size: 3em;
    font-weight: 300;
    color: #fff;
    text-align: right;
}

blockquote i {
    font-size: 0.55em;
}

/*==================================MAIN LAYOUT / STRUCTURE==================================*/
header {
     background:#006699;
     background-size: cover;
     position: relative;
  
}


header .header-logo, header .top-nav {
    position: absolute;
    z-index: 123;
    
}

header .header-logo {
    position: absolute;
    z-index: 999;
    margin: 0;
    padding: 0;
    top: 12px;
}

header .top-nav {
    top: 30px;
    right: 0;
}


header .top-nav ul li {
    float: left;
    list-style: none;
    margin-left: 30px;
    padding: 10px 0;
    color: #fff;
}

header .top-nav ul li .top-cta {
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 10px 30px;
}

header .top-nav ul li a {
    color: #fff;
}

header .top-nav ul li a:hover {
    text-decoration: none;
}


header.fix {
    background: #fff;
    background-size: cover;
    position: fixed;
    height: 100px;
    z-index: 110;
    width: 100%;
    transition: all 0.4s ease;
}  

header.fix .top-nav ul li {
    color: #333;
}
  
header.fix .top-nav ul li a {
    color: #006699;
}

header.fix .top-nav ul li .top-cta {
    border: 1px solid #006699;
    border-radius: 30px;
    padding: 10px 30px;
}

header .logo-color {
    display: none;
}


/*==================================MISC AND CUSTOM CLASSESS==================================*/




.top-index {
    z-index: 999;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(23,81,131,0.9);
    z-index: 10;
}

/*.slider-container {
    background: url('../img/echo-pay-slider-img.jpg') no-repeat fixed;
    background-size: cover;
    height: 800px;
    position: relative;
    top: 0;
}*/




.slider {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/echo-pay-slider-with-overlay.jpg) no-repeat center center scroll;
    background-size: cover;
}


.page-title-wrap {
    display: table;
    position: relative;
    width: 100%;
    height: 30%;
    background: url(../img/echo-pay-slider-with-overlay.jpg) no-repeat center center scroll;
    background-size: cover;
}

.page-title-content {
    padding: 5% 0;
}


.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.slider-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}



.container-wrap {
    background-color: #fbfbfb;
    position: relative;
    z-index: 10;
    padding: 100px 0;
}

.hero-cta {
    background: #6ab9ea;
    border-radius: 30px;
    padding: 15px 60px;
    color: #fff;
    text-decoration: none;
    font-size: 1.5em;
    text-transform: uppercase;
    letter-spacing: 2px;
}


.hero-cta:hover, .find-out-more:hover, .hero-cta:active, .find-out-more:active {
    opacity: 0.9;
    text-decoration: none;
    color: #fff;
}

.find-out-more {
    color: #fff;
    display: block;
    margin-top: 100px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 300;
}


.top-nav-toggle, .top-nav-mobile {
        display: none;
    }
    

.col-3silo {
    text-align: center;
}

.col-3silo p{
    text-align: left;
}

.blue-wrap {
    background: #1e7eb2;
}

.mid-cta-wrap {
    background: #d1e9f8;
    padding: 60px 0;
    text-align: center;
}

.mid-cta {
    background: #1e7eb2;
    border-radius: 30px;
    padding: 15px 60px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1em;
}

.mid-cta:hover {
    color: #fff;
    text-decoration: none;
}


.tbl-select-plan {
	width: 100%;
	margin:30px 0;
    font-weight: 300;
}

.tbl-select-plan .radio label{
	font-size: 20px;
	font-weight: 600;
}

.tbl-select-plan .radio label i{
	font-size: 18px;
	font-weight: normal;
}

.plan-pay-go, .plan-limitless {
	width: 35%;
	padding: 10px;
}

.plan-pay-go {
	background: #d9eaf5;
}

.plan-limitless {
	background: #e9f8fe;
}

.tbl-select-plan tbody th {
	background: #006699;
	border: 1px solid #006699;
	padding: 15px;
	color: #fff;
	font-weight:normal;
	font-size: 1.5em;
}

.tbl-select-plan tbody td {
	border: 1px solid #ccc;
	padding: 10px;
	font-size: 18px;
}




.team-container  {
    text-align: center;
    
}

.team-container img {
    width: 100%;
    margin-bottom: 20px;
}

.team-container h3 {
    margin: 0;    
}

.team-container span {
    position: absolute;
    right: 30px;
}

.icon-linkedin {
    top: 10px;
}

.icon-linkedin a .fa {
    color: #006699;
}


.icon-twitter a .fa {
    color: #0099cc;
}

.icon-twitter {
    top: 40px;
}

.ep-parallax {
    background: url(../img/parallax-bg.png) no-repeat fixed;
    background-size: cover;
}


footer p {
	text-align: center;
	color: #fff;
}

footer p i {
	padding-right: 10px;
}

footer h2 {
	font-size: 1.5em;
	color: #fff;
}

footer p a {
	color: #7c7c7c;
    font-size: 16px;
}

footer p a:hover {
	color: #fff;
}

.txt-lnk a {
  color: #fff !important; 
  text-decoration: none;
}

.txt-lnk a:hover {
    color: #7c7c7c;
}

.footer-top {
	padding: 60px 0;
}

.footer-top {
	background: #252525;
	text-align: center;
}


.footer-bottom {
	background: #111;
	padding: 20px 0;
}

.footer-bottom ul {
	margin: 0;
	padding: 0;
}

.footer-bottom ul li {
	float: left;
	margin-right: 20px;
	list-style: none;
}

.footer-bottom ul li a { 
	color: #fff;
}

.footer-bottom p {
	margin: 0;
	padding: 0;
	text-align: right;
}


.gallery, .gallery img {
    width: 100%;
}

.padding-bottom-zero {
    padding-bottom:0;
}

.sub-heading-text, .sub-heading-text-white {
    text-align: center;
}

.sub-heading-text strong {
    color: #1e7eb2;
}

.custom-textarea {
    height: 104px;
    outline: none;
}

.lnk-button {
    background: #1e7eb2;
    border-radius: 30px;
    padding: 15px 60px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1em;
}

#btnSend {
    margin-top: 20px;
}

.txt-link {
    color: #333;
    text-align: center;
}

.faq-question {
    font-weight: 500;
    margin-bottom: 5px;
}

.faq-answer {
    margin-bottom: 30px;
}

.sub-heading-text-white strong {
    color: #fff !important;
}


.sb-slidebar.sb-active {
    display: none;
}


@media (max-width: 991px) {

    .col-3silo {
        margin-bottom: 40px;
    }
}

    
@media (max-width: 990px) {

    .header-logo img {
        width: 100%;
    }    

    header .top-nav-toggle {
        position: absolute;
        top: 25px;  
        right: 0;
        display: block;
        width: 36px;
        height: 44px;
        margin-right: 10%;
        overflow: hidden;
        white-space: nowrap;
        color: transparent;
        z-index: 999;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        box-sizing: border-box;
        cursor: pointer;

    }

    header .top-nav-toggle span, .top-nav-toggle span::before, .top-nav-toggle span::after {
        display: block;
        margin: 6px;
        height: 3px;
        width: 100%;
        background: #ffffff;
    } 

    header.fix {
        height: 90px;
    }    



    header.fix .top-nav-toggle span, .top-nav-toggle span::before, .top-nav-toggle span::after {
        display: block;
        margin: 6px;
        height: 3px;
        width: 100%;
        background: #006699;
    }    
    
    .top-nav {
        display: none;
    }
    

    .top-cta {
        display: block;
    }
    
    .top-nav-mobile ul {
        padding: 2% 4%;
    }
    
     .top-nav-mobile ul li {
        list-style: none;
         margin: 20px 0;
    }
    
    .top-nav-mobile ul li .top-cta {
        border-radius: 30px;
        padding: 15px;
        text-decoration: none;
        background: #006699;
        text-align: center;
        color: #fff;
    }
    
    
    
    .top-nav-mobile {
        position: absolute;
        top: 90px; left:0;
        background: #fff;
        z-index: 124;
        width: 100%;
    }
    
    .page-title-content h1 {
    font-size: 2.5em;
}
    
     .footer-bottom ul {
        text-align: center;
         margin-bottom: 30px;
     }
    
    .footer-bottom ul li  {
        display: block;
        padding: 15px 0;
        float: none;
        margin-right: 0;
        border-bottom:1px solid #222;
    }
    
    .footer-bottom p {
        text-align: center;
        
    }
    
    
    
}



@media (max-width: 480px) { 
    
    
    h1 {
        font-size: 2.5em;
    }
    
    h2 {
        font-size: 1.5em;
    }
    

    .slider-content h1 {
        margin: 120px 0 20px 0;
        font-size: 3.2em;
    }
	
    
    
}



@media (max-width: 360px) { 
    


    .slider-content h1 {
        margin: 120px 0 20px 0;
        font-size: 2.4em;
    }

    .slider-content p {
        font-size: 1.5em;
        margin-bottom: 40px;
    }

    
}





@media (max-width: 320px) { 

.slider-content h1 {
    margin: 0 0 10px 0;
    font-size: 2em;
}
    
.slider-content p {
    font-size: 1em;
    margin-bottom: 40px;
}
    
    
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    color: #666;
    border-radius: 0;
    outline: none;
    height: auto;
}

.form-group label {
    color:#666;
    font-weight: 500;
    font-size:16px;
}

.btn-login {
    display: block;
    text-align: center;
    padding: 8px 30px;
    background: #4fc3f7;
    border: none;
    color: #fff;
    text-transform: uppercase;
    border-radius: 30px;
    font-size: 1.3em;
    outline: none;
    width: 100%;
}


.form-message p.bg-danger {
    color: #eb0a0f;
    padding: 10px;
}

.forgot-password {
    font-size: 14px;
}




/*========================TEXT CONTENTS STYLES========================*/
.container-text-wrap {
    background-color: #fbfbfb;
    position: relative;
    z-index: 10;
    padding: 50px 0;
	min-height: 500px;
}

.container-text-wrap h2 {
   margin-bottom: 30px;
}

.text-contents h4, .text-contents h3 {
	margin-top: 30px;
}

.text-contents p, li{
	font-size: 14px;
	font-weight: 200;
}


.text-contents ol li {
	margin-bottom: 30px;
}

.text-contents ol li ul {
	margin-bottom: 20px;
}

.text-contents ol li ul li {
	margin-bottom: 5px;
	list-style: disc;
}

.list-zero {
	list-style: none;
}

.ol-faq {
	margin-bottom: 20px;
}

.ol-faq li {
	margin-bottom: 10px !important;
}


.tbl-cha {
	width: 100%;
}

.tbl-cha, .tbl-cha th, .tbl-cha td {
	border: 1px solid #999;
	padding: 10px;
}

.tbl-cha th {
	background: #ccc;
	text-align: center;
}

.tbl-cha .td-center {
	text-align: center;
}

.small-text {
	font-size: 12px !important;
}

.btn-app-img {
	width: 30%;
}


@media (max-width: 487px) { 
	.tbl-cha {
		margin-left: -40px;
	}
	
	.btn-app-img {
	width: 80%;
}
	
	
	
}