/************ Misc CSS ***************/
body { font-family: 'Roboto', sans-serif; }
a:hover { text-decoration: none; }
.container-fluid { padding: 0; }
.card { border: none; border-radius: 0; background-color: transparent; }
.tap_main_container { overflow: hidden; position: relative; }
.tap_main_container::before { content: ''; width: 125%; height: 34%; position: absolute; background-color: #f4f4f4; left: 1rem; right: 0; bottom: 10%; z-index: -3; border-top-left-radius: 60rem; border-top-right-radius: 48rem; }
.tap_main_container::after { content: ''; width: 125%; height: 24%; position: absolute; background-color: #f0542b; left: -12%; right: 0; bottom: 0rem; z-index: -2; border-top-right-radius: 45rem; border-top-left-radius: 45rem; }

#submit {border: 2px solid #fff; color: #fff; padding: 6px 36px;}
/********************** NAVBAR *****************/
.navbar { background-color: #f4f4f4; opacity: 0.96; padding: 1rem 3rem; transition: all 0.5s; }
.navbar .navbar-brand img { width: 7rem; transition: all 0.5s; }
.navbar .navbar-nav.mr-auto { margin: 0 auto; }
.navbar .navbar-nav.mr-auto .nav-item { margin: 0 0.5rem; font-weight: 700; }
.navbar .navbar-nav.mr-auto .nav-item a { color: #585858; }
.navbar .btn { background-color: #f0542b; color: #fff; border-radius: 2rem; font-weight: 700; }
.tap_section_1a h5 {display:inline-block; font-weight: 400; font-size: 0.9rem; padding-top:30px; color:#212529;}
.tap_section_1a h5 img {margin-right:10px; margin-left:10px;}

/********************** #About *****************/
.tap_section_1 { position: relative; padding: 7rem; margin: 0 0 5rem 0; overflow: hidden; }
.tap_section_1 .tap_section_1a { padding: 1rem 1rem 1rem 3rem; }
.tap_section_1 .tap_section_1a p { font-size: 1.5rem; font-weight: 300; }
.tap_section_1 .tap_section_1a p span { font-weight: 400; color: #f0542b; }
.tap_section_1 .tap_section_1a a { color: #f0542b; margin-top: 1rem; }
.tap_section_1 .tap_section_1a a span { padding-bottom: 0.5rem; border-bottom: 2px solid #f0542b; }
.tap_section_1 .tap_section_1b { padding: 0 1rem 0 0; }
.tap_section_1::before { content: ''; width: 105%; position: absolute; background-color: #f4f4f4; top: 0; left: 0; right: 0; bottom: 2rem; z-index: 0; border-bottom-right-radius: 52rem; border-bottom-left-radius: 52rem; }
.tap_section_1::after { content: ''; width: 105%; position: absolute; background-color: #f0542b; top: 0; left: 5rem; right: 0; bottom: 0rem; z-index: -2; border-bottom-right-radius: 45rem; border-bottom-left-radius: 45rem; }

/********************** #How it Works *****************/
.tap_section_2 { padding: 5rem; margin: 0 0 5rem 0; text-align: center; }
.tap_section_2 .tap_section_title { font-weight: 300; }
.tap_section_2 .tap_section_title span { color: #f0542b; }
.tap_section_2 .card .card-img-top { width: 90%; margin: 0 auto; }
.tap_section_2 .card .card-body { padding: 1rem 2rem; }
.tap_section_2 .card .card-body .card-title { color: #f0542b; font-weight: 300; }
.tap_section_2 .card .card-body .card-text { font-weight: 300; font-size: 1.2rem; }
.tap_section_2 .card:nth-child(2) { position: relative; }
.tap_section_2 .card:nth-child(2)::after { content: ''; background-image: url(/img/img3a.jpg); background-size: 6.5rem; width: 7rem; height: 7rem; background-repeat: no-repeat; position: absolute; right: -1.8rem; top: 6rem; }

/********************** #Benefits *****************/
.tap_section_3:after { content: ''; background-image: url(../img/tap2phonemerchantbackside.png); background-size: 25rem; width: 25rem; height: 40rem; background-repeat: no-repeat; position: absolute; left: 0; top: 1.5rem; z-index: -1; }
.tap_section_3 { padding: 0 5rem 5rem 5rem; margin: 0 0 5rem 0; position: relative; }
.tap_section_3 .tap_section_3a { margin-left: 3rem; }
.tap_section_3 .tap_section_3a .card-img-top { width: 90%; }
.tap_section_3 .tap_section_3b { padding: 3rem; }
.tap_section_3 .tap_section_3b .card-title { font-weight: 500; font-size: 1.3rem; margin-bottom: 2rem; }
.tap_section_3 .tap_section_3b .card-title span { color: #f0542b; }
.tap_section_3 .tap_section_3b .card-text { font-size: 1.5rem; font-weight: 300; }
.tap_section_3 .tap_section_3b ul { list-style: none; padding: 0; }
.tap_section_3 .tap_section_3b ul li { padding: 1rem 0; border-bottom: 1px solid #ddd; display: flex; align-items: center; }
.tap_section_3 .tap_section_3b ul li img { width: 4rem; height: 4rem; margin-right: 2rem; }
.tap_section_3 .tap_section_3b ul li p { font-weight: 300; margin: 0; width: 70%; }

/********************** #Resources *****************/
.tap_section_4 { padding: 5rem; margin: 0 0 5rem 0; }
.tap_section_4 .tap_sub_section_4 { width: 70%; }
.tap_section_4 .tap_section_title { font-size: 1.5rem; font-weight: 300; }
.tap_section_4 .nav-link { color: #000; font-weight: 500; padding: 1rem 0; border-bottom: 1px solid #ccc; border-radius: 0; }
.tap_section_4 .nav-link p { margin: 0; }
.tap_section_4 .nav-link span { display: none; }
.tap_section_4 .nav-link.active { background: transparent; position: relative; }
.tap_section_4 .nav-link.active p { color: #f0542b; margin-bottom: 0.5rem; }
.tap_section_4 .nav-link.active span { display: block; color: #000; font-weight: 300; }
.tap_section_4 .nav-link.active:after { content: ""; position: absolute; left: -2.2rem; top: 39%; bottom: 39%; border-left: 10px solid transparent; border-right: 10px solid #f0542b; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.tap_section_4 .nav-link.active:before { content: " "; position: absolute; left: -1rem; top: 1rem; bottom: 1rem; width: 5px; background-color: #f0542b; }
.tap_section_4 .tap_download a { padding: 0; margin: 2rem 0; width: 10rem; }
.tap_section_4 .tap_download a:focus { box-shadow: none; }

/********************** #Video *****************/
.tap_video_section { padding: 5rem; margin: 0 0 5rem 0; }
.tap_video_section .card { width: 60%; margin: 0 auto; position: relative; display: flex; justify-content: center; align-items: center; }
.tap_video_section .card .video_play_btn { position: absolute; }
.tap_video_section .card .video_play_btn svg { width: 4rem; height: 4rem; color: #fff; background: #f0542b; border-radius: 5rem; padding: 0 0 0 0.5rem; }
.tap_video_section .card .video_play_btn:focus { box-shadow: none; }
.tap_video_section .card video:focus { outline: none; }

/********************** #Contact us *****************/
.tap_section_5 { padding: 2rem 2rem 0 2rem; margin: 0 0 1rem 0; width: 60%; margin: 5rem auto; }
.tap_section_5 .tap_section_title { text-align: center; color: #fff; font-weight: 300; font-size: 2.5rem; margin-bottom: 2rem; }
.tap_section_5 form input { border-radius: 2rem; margin: 1rem 0; border: none; }
.tap_section_5 form button { color: #fff; border: 2px solid #fff; border-radius: 2rem; padding: 0.5rem 3rem; }
.tap_section_5 .card { margin: 1rem; }
.tap_section_5 .card p { color: #fff; font-weight: 300; }
.tap_section_5 .card p:first-child { font-weight: 500; }

/********************** #Footer *****************/
footer { display: flex; flex-wrap: wrap; justify-content: space-evenly; margin-bottom: 2rem; }
footer p { color: #fff; font-size: 0.8rem; margin: 0; }
footer p img { width: 4rem; margin-left: 0.5rem; }

/***** other *****/
.form-control {font-size: 14px!important;}
.btn-outline-primary:hover {color: #000; background-color: #fff; border-color: #fff;}
.stickyOn {padding:0.5rem 3rem; boxShadow:1px 1px 8px -5px #000;}
.stickyOn #logo {width:3.5rem;}
.card-midile img {margin-left: 76px!important;}
.tap_video_section video {height: 434px; width: 714px;}

/********************** Media Queries *****************/
@media only screen and (min-width: 1540px) {
	.container { width: 85%; }
	.navbar .navbar-nav.mr-auto .nav-item a { font-size: 1.5rem; }
	.tap_main_container::before { height: 36%; border-top-left-radius: 72rem; border-top-right-radius: 55rem; }
	.tap_main_container::after { height: 25%; border-top-right-radius: 57rem; border-top-left-radius: 57rem; }
	.tap_section_1 .tap_section_1a a span { font-size: 1.2rem; }
	.tap_section_2 .tap_section_caption { font-size: 1.2rem; margin-bottom: 3rem; }
	.tap_section_3:after { background-size: 30rem; width: 33rem; height: 46rem; }
	.tap_section_3 .tap_section_3a .card-img-top { width: 100%; }
	.tap_section_3 .tap_section_3a { margin-left: 0; }
	.tap_section_3 .tap_section_3b .card-title { font-size: 1.2rem; }
	.tap_section_3 .tap_section_3b .card-text { font-size: 1.6rem; }
	.tap_section_3 .tap_section_3b ul li p { width: 100%; font-size: 1.2rem; }
	.tap_section_4 .tap_section_title { font-size: 2rem; }
	.tap_section_4 .nav-link p { font-size: 1.5rem; }
	.tap_section_4 .nav-link.active span { font-size: 1.2rem; }
	.tap_section_5 { width: 65%; }
	.tap_section_5 form input { font-size: 1.5rem; margin-bottom: 2rem; }
	.tap_section_5 .card p { font-size: 1.5rem; }
	footer p { font-size: 1rem; }
	footer p img { width: 5rem; }
}

@media only screen and (min-width: 1021px) and (max-width: 1260px) {
	.tap_section_1 { padding: 5rem; }
	.tap_section_1 .tap_section_1a h1, .tap_section_2 .tap_section_title { font-size: 1.5rem; }
	.tap_section_1 .tap_section_1a p { font-size: 1rem; }
	.tap_section_2 { padding: 5rem 0; }
	.tap_section_2 .card:nth-child(2)::after { right: -2.8rem; top: 4rem; }
	.tap_section_2 .card-deck { margin-top: 2rem; }
	.tap_section_3 .tap_section_3b { padding: 3rem 0; }
	.tap_section_4, .tap_video_section { margin: 0; }
	.tap_section_4 .tap_sub_section_4 { width: 100%; }
	.tap_section_5 { width: 70%; }
	.tap_section_5 form input { margin: 1.5rem 0; }
}

@media only screen and (min-width: 551px) and (max-width: 1020px) { 
	.container { max-width: 100%; padding: 0; }
	.tap_section_1, .tap_section_2, .tap_section_3, .tap_section_4, .tap_section_5, .tap_video_section { padding: 1rem; margin: 2rem 0; }
	.tap_section_1 { margin: 0 0 3rem 0; padding: 4rem 0; }
	.tap_section_1::before { bottom: 2rem; }
	.tap_section_1::after { left: 3rem; }
	.tap_section_1 .tap_section_1a h1, .tap_section_2 .tap_section_title { font-size: 1.5rem; }
	.tap_section_1 .tap_section_1a p { font-size: 1rem; }
	.tap_section_2 .card .card-body { padding: 1rem 0; }
	.tap_section_2 .card .card-body .card-text { font-size: 1rem; }
	.tap_section_2 .card:nth-child(2)::after { background-size: 5.5rem; right: -3.8rem; top: 3rem; }
	.tap_section_3:after { background-size: 14rem; }
	.tap_section_3 .tap_section_3b { padding: 3rem 0; }
	.tap_section_4 .tap_sub_section_4 { width: 100%; }
	.tap_video_section video { width: 80%; }
	.tap_video_section .card { width: 80%; }
	.tap_video_section .card .video_play_btn svg { width: 3rem; height: 3rem; padding: 0 0 0 0.3rem; }
	.tap_section_5 { width: 100%; }
	.tap_section_5 form input { margin: 1.5rem 0; }
	.tap_main_container::before { height: 25%; } 
}

@media only screen and (max-width: 560px) {
	.container { width: 100%; padding: 0; }
	.tap_section_1, .tap_section_2, .tap_section_3, .tap_section_4, .tap_section_5, .tap_video_section { padding: 1rem; margin: 2rem 0; }
	.tap_section_1 { margin: 0 0 3rem 0; }
	.tap_section_1::after { top: 0; left: 1rem; bottom: 23rem; }
	.tap_section_1::before { top: 0; left: 0; bottom: 24rem; }
	.tap_section_1 .tap_section_1a { padding: 0; margin-bottom: 2rem; }
	.tap_section_1 .tap_section_1a h1, .tap_section_2 .tap_section_title {    text-align: center; font-size: 1.5rem; }
	.tap_section_1 .tap_section_1a p { font-size: 1.2rem;     text-align: center;}
	.tap_section_2 .card-deck { margin-top: 2rem; }
	.tap_section_2 .card .card-img-top { width: 50%; }
	.tap_section_2 .card:nth-child(2)::after { background-size: 4.5rem; right: 1.4rem; top: 3rem; }
	.tap_section_2 .card .card-body { padding: 1rem; }
	.tap_section_2 .card .card-body .card-title { font-size: 1.2rem;}
	.tap_section_2 .card .card-body .card-text { font-size: 1rem; }
	.tap_section_3:after { background-size: 12rem; }
	.tap_section_3 .tap_section_3a .card-img-top { width: 85%; }
	.tap_section_3 .tap_section_3b { margin-top: 5rem; padding: 2rem 0; }
	.tap_section_3 .tap_section_3b .card-title { margin-bottom: 0.5rem; font-size: 1.2rem; text-align: center;}
	.tap_section_3 .tap_section_3b .card-text { font-size: 1.2rem;text-align: center; }
	.tap_section_3 .tap_section_3b ul li img { width: 3rem; height: 3rem; margin-right: 1rem; }
	.tap_section_3 .tap_section_3b ul li p { width: 100%; font-size: 0.9rem; }
	.tap_section_4 .tap_sub_section_4 { width: 100%; }
	.tap_section_4 .tap_section_title { margin-top: 2rem; text-align: center;}
	.tap_section_4 .nav-link.active p { margin: 0; }
	.tap_section_4 .nav-link.active span { font-size: 0.8rem; }
	.tap_section_4 .tab-content .card img { width: 50%; margin: 0 auto; }
	.tap_section_4 .tap_download { text-align: center; }
	.tap_section_4 .tap_download a { width: 8rem; }
	.tap_video_section video { width: 100%; }
	.tap_video_section .card { width: 100%; }
	.tap_video_section .card .video_play_btn svg { width: 3rem; height: 3rem; padding: 0 0 0 0.3rem; }
	.tap_section_5 { width: 100%; }
	.tap_section_5 form { margin-bottom: 2rem; }
	.tap_section_5 form input { margin: 1.5rem 0; }
	.tap_main_container::after { height: 21%; }
	.tap_main_container::before { height: 15%; bottom: 8.5%; left: 0;}
    .card-midile img {margin-left: 115px!important;}
	.navbar .navbar-brand img {width: 5rem;}
	#navbar {padding:0.5rem 1rem;}
	footer {padding: 0 35px;text-align: center;}
	.tap_section_5 .card {margin: 0rem;}
	.tap_section_4 .nav-link {text-align: center;}
	.navbar-collapse .card-img-top {width: 121px;}
	.tap_video_section video {height: 300px; width: 100%;}
}