/*FEATURES PAGE*/

/*--------------------------------*/

/*Top Section*/

#topsection {margin: auto; background-image: url("images/toppic1.jpg"); background-position: 50% 50%; background-size: cover; background-color: #072D56;}
#topsection .bodyarea {padding-bottom: 60px; color: #FFF;}
#topsection img {display: block; width: 600px; height: 300px; width: 100%; height: auto; max-width: 743px; margin: auto; text-align: center;}
#topsection .tophead {font-family: 'Archivo', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 3em; line-height: 1.15; margin-bottom: 12px;}
#topsection .btn {margin-top: 50px;}

@media (min-width: 1261px) {#topsection section:last-child .btn {display: none;}}
@media (max-width: 1260px) {
#topsection section:first-child .btn {display: none;}
#topsection section:last-child .btn {display: table; margin: 30px auto 0 auto;}
}

@media (min-width: 1231px) {
#topsection {padding-top: 50px;}
#topsection .bodyarea {-webkit-display: flex; display: flex; -webkit-flex-direction: row; flex-direction: row;}
#topsection .bodyarea section:first-child {margin-right: 30px; width: 49%;}
#topsection .bodyarea section:last-child {margin-left: 30px; width: 51%;}
#topsection .ourtv {margin-top: 80px;}
}
@media (max-width: 1230px) {
#topsection {-webkit-display: flex; display: flex; -webkit-flex-direction: column; flex-direction: column; padding-top: 30px;}
#topsection section:first-child {-webkit-order: 2; order: 2; text-align: center;}
#topsection section:last-child {-webkit-order: 1; order: 1; margin-top: 30px;}
#topsection .ourtv {margin-top: 30px;}
}
@media (max-width: 500px) {#topsection .tophead {font-size: calc(12.5vw - 3px);}}

/*--------------------------------*/

/*Remote Enable*/

#remote {margin: auto;} #remote .bodyarea {padding: 50px 0;} #remote .remotehead {margin-bottom: 35px;}
#remote .bodyarea section:last-child img {display: block; width: 600px; height: 300px; width: 100%; height: auto; max-width: 600px;}
#remote .bodyarea section:first-child img {display: inline-block; width: 38px; height: 38px; margin-right: 10px; border-radius: 5px;}

#remote td {vertical-align: top;} #remote td:first-child {padding-right: 20px;} #remote td:last-child {padding-left: 20px;}
#remote td div {display: table;}
#remote .bodyarea section:first-child img, #remote table span {display: table-cell; vertical-align: middle;}

@media (min-width: 1271px) {
#remote .bodyarea {-webkit-display: flex; display: flex; -webkit-flex-direction: row; flex-direction: row;}
#remote .bodyarea section:first-child {margin-right: 40px; width: 60%;}
#remote .bodyarea section:last-child {margin-left: 40px; width: 40%;}
#remote .remotehead {white-space: nowrap;}
}
@media (max-width: 1270px) {
#remote {-webkit-display: flex; display: flex; -webkit-flex-direction: column; flex-direction: column;}
#remote section:first-child {-webkit-order: 2; order: 2;} #remote section:last-child {-webkit-order: 1; order: 1; margin-top: 30px;}
#remote .bodyarea section:last-child img {margin: auto;}
}

@media (min-width: 726px) {#remote td {width: 50%;}}
@media (max-width: 725px) {#remote td {display: block; padding: 0 !important;}}

/*--------------------------------*/

/*Which CRM*/

#whichcrm {margin: auto; background-image: url("images/toppic1.jpg"); background-position: 50% 50%; background-size: cover; background-color: #072D56;}
#whichcrm .bodyarea {padding-bottom: 60px; color: #FFF;}
#whichcrm .bodyarea section:nth-child(2) img {display: block; width: 600px; height: 300px; width: 100%; height: auto; max-width: 600px; margin: 30px auto 0 auto; text-align: center; border-radius: 20px; outline: 3px solid #FCD302;}
#whichcrm .tophead {font-family: 'Archivo', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 3em; line-height: 1.15; margin-bottom: 12px;}

#whichcrm table {width: 100%; table-layout: fixed; margin-top: 40px;} #whichcrm td {vertical-align: top;}
#whichcrm td div {display: table;}
#whichcrm .bodyarea section:nth-child(1) img, #whichcrm span {display: table-cell; vertical-align: middle;}
#whichcrm .bodyarea section:nth-child(1) img {width: 38px; height: 38px; margin-right: 10px;}

@media (min-width: 1416px) {
#whichcrm td:nth-child(1) {padding: 0 30px 0 0;} #whichcrm td:nth-child(2) {padding: 0 15px;} #whichcrm td:nth-child(3) {padding: 0 0 0 30px;}
}
@media (max-width: 1415px) and (min-width: 999px) {
#whichcrm td:nth-child(1) {padding: 0 20px 0 0;} #whichcrm td:nth-child(2) {padding: 0 10px;} #whichcrm td:nth-child(3) {padding: 0 0 0 20px;}
}

@media (min-width: 999px) {
#whichcrm {padding-top: 50px;}
#whichcrm article:nth-child(1) {-webkit-display: flex; display: flex; -webkit-flex-direction: row; flex-direction: row;}
#whichcrm article:nth-child(2) {display: block; width: 100%;}
#whichcrm article:nth-child(1) section:nth-child(1) {margin-right: 30px; width: 49%;}
#whichcrm article:nth-child(1) section:nth-child(2) {margin-left: 30px; width: 51%;}
#whichcrm article:nth-child(2) section:nth-child(3) {width: 100%;}
}
@media (max-width: 998px) {
#whichcrm {-webkit-display: flex; display: flex; -webkit-flex-direction: column; flex-direction: column; padding-top: 30px;}
#whichcrm article:nth-child(1) {text-align: center;} #whichcrm section:nth-child(2) {margin-top: 30px;}
#whichcrm td {display: block;}
}

@media (max-width: 380px) {#whichcrm .tophead {font-size: 13.5vw;}}

/*--------------------------------*/

/*Microsoft 365 Integration*/

#m365 .bodyarea {padding-bottom: 60px;}
#m365 .bodyarea section:nth-child(2) img {display: block; width: 600px; height: 300px; width: 100%; height: auto; max-width: 600px; margin: auto; text-align: center; border-radius: 20px; outline: 3px solid #FCD302;}
#m365 .btn {display: table; margin-top: 30px;}

#m365 table {width: 100%; table-layout: fixed; margin-top: 60px;} #m365 td {vertical-align: top;}
#m365 td div {display: table;}
#m365 .bodyarea section:nth-child(1) img, #m365 span {display: table-cell; vertical-align: middle;}
#m365 .bodyarea section:nth-child(1) img {width: 38px; height: 38px; margin-right: 10px;}

@media (min-width: 1416px) {
#m365 td:nth-child(1) {padding: 0 30px 0 0;} #m365 td:nth-child(2) {padding: 0 15px;} #m365 td:nth-child(3) {padding: 0 0 0 30px;}
}
@media (max-width: 1415px) and (min-width: 999px) {
#m365 td:nth-child(1) {padding: 0 20px 0 0;} #m365 td:nth-child(2) {padding: 0 10px;} #m365 td:nth-child(3) {padding: 0 0 0 20px;}
}

@media (min-width: 1401px) {#m365 section:nth-child(2) .btn {display: none;}}
@media (max-width: 1400px) {#m365 section:nth-child(1) .btn {display: none;} #m365 section:nth-child(2) .btn {margin: 30px auto 0 auto;}}

@media (min-width: 1216px) {.unlike {font-size: 1.5em; line-height: 1.4;}}
@media (max-width: 1215px) {.unlike {font-size: 1.25em; line-height: 1.4;}}

@media (min-width: 1166px) {
#m365 {padding-top: 50px;}
#m365 article:nth-child(1) {-webkit-display: flex; display: flex; -webkit-flex-direction: row; flex-direction: row;}
#m365 article:nth-child(2) {display: block; width: 100%;}
#m365 article:nth-child(1) section:nth-child(1) {margin-right: 30px; width: 49%;}
#m365 article:nth-child(1) section:nth-child(2) {margin-left: 30px; width: 51%;}
#m365 article:nth-child(2) section:nth-child(3) {width: 100%;}
}
@media (max-width: 1165px) {
#m365 {-webkit-display: flex; display: flex; -webkit-flex-direction: column; flex-direction: column; padding-top: 30px;}
#m365 article:nth-child(1) {text-align: center;}
#m365 section:nth-child(2) {margin-top: 30px;}
#m365 td {display: block;}
}

/*--------------------------------*/

/*Easy to Manage*/

#easy {margin: auto; background-color: #F0F2F4;}
#easy .bodyarea {-webkit-display: flex; display: flex; padding: 50px 0; justify-content: center; align-items: center;}
#easy img {display: block; width: 600px; height: 350px; width: 100%; height: auto; max-width: 600px; margin: 40px auto; border-radius: 30px;}
#easy .easyhead {margin-bottom: 40px;}

@media (min-width: 981px) {
#easy .bodyarea {-webkit-flex-direction: row; flex-direction: row;}
#easy section:first-child {margin-right: 40px; width: 50%;}
#easy section:last-child {margin-left: 40px; width: 50%;}
#easy .easyhead {white-space: nowrap;}
}
@media (max-width: 980px) {
#easy .bodyarea {-webkit-flex-direction: column; flex-direction: column;}
#easy section:first-child {-webkit-order: 1; order: 1;}
#easy section:last-child {-webkit-order: 2; order: 2; margin-top: 30px;}
}

/*--------------------------------*/

/*Customer Prefer*/

#prefer {margin: auto;} #prefer .bodyarea {padding: 50px 0;}
#prefer .bodyarea section:first-child img {display: block; width: 600px; height: 300px; width: 100%; height: auto; max-width: 650px;}
#prefer .bodyarea section:last-child img {display: inline-block; width: 38px; height: 38px; margin-right: 10px; border-radius: 5px;}
#prefer .btn {display: table; margin: 30px auto 0 auto;}
#prefer td {vertical-align: top;}

@media (min-width: 1101px) {#prefer .bodyarea section:first-child .btn {display: none;}}
@media (max-width: 1100px) {#prefer .bodyarea section:last-child .btn {display: none;}}

@media (min-width: 999px) {
#prefer .bodyarea {-webkit-display: flex; display: flex; -webkit-flex-direction: row; flex-direction: row;}
#prefer .bodyarea section:first-child {margin-right: 40px; width: 45%;}
#prefer .bodyarea section:last-child {margin-left: 40px; width: 55%;}
}
@media (max-width: 998px) {
#prefer {-webkit-display: flex; display: flex; -webkit-flex-direction: column; flex-direction: column;}
#prefer section:first-child {-webkit-order: 2; order: 2;} #prefer section:last-child {-webkit-order: 1; order: 1; margin-top: 30px;}
#prefer .bodyarea section:first-child img {margin: auto;}
}

/*--------------------------------*/

/*Connect With*/

#connect {margin: auto; background-image: url("images/toppic1.jpg"); background-position: 50% 50%; background-size: cover; background-color: #072D56;}
#connect .bodyarea {-webkit-display: flex; display: flex; padding: 50px 0; justify-content: center; align-items: center; color: #FFF;}
#connect img {display: block; width: 600px; height: 350px; width: 100%; height: auto; max-width: 800px; margin: 40px auto; border-radius: 30px;}
#connect .btn {margin-top: 50px;}
#connect section:last-child img {border-radius: 20px; outline: 3px solid #FCD302;}

@media (min-width: 1146px) {#connect .connecthead {white-space: nowrap; margin-bottom: 60px;} #connect section:last-child {margin-top: 80px;}}
@media (max-width: 1145px) {#connect section:last-child img {margin-top: 0;}}
@media (min-width: 981px) {
#connect .bodyarea {-webkit-flex-direction: row; flex-direction: row;}
#connect section:first-child {margin-right: 50px; width: 47%;}
#connect section:last-child {margin-left: 50px; width: 53%;}
}
@media (max-width: 980px) {
#connect .bodyarea {-webkit-flex-direction: column; flex-direction: column;}
#connect section:first-child {-webkit-order: 1; order: 1;}
#connect section:last-child {-webkit-order: 2; order: 2;}
#connect section:last-child img {display: none;}
}

/*--------------------------------*/

/*Features Table*/

#featlist {margin: auto;} #featlist .bodyarea {padding: 50px 0 70px 0;}
#featlist table {margin: auto; table-layout: fixed;}
#featlist .tbl1 {max-width: 900px;} #featlist .tbl2 {border-collapse: collapse;}
#featlist th, #featlist td {vertical-align: top; padding: 6px 15px; line-height: 1.4;}
#featlist .td1, #featlist .td2 {padding: 0 !important}
#featlist .tbl2 th, #featlist .tbl2 td {border: 1px solid #000; border-top: none; border-collapse: collapse;}
#featlist .tbl2 tr:first-child th {border-top: 1px solid #000;}
#featlist th {text-align: left; font-size: 1.2em; font-weight: 600; color: #2B5099; background-color: #DDD;}

@media (min-width: 571px) {#featlist .tbl2 {margin: 40px auto 0 auto; width: 100%;}}
@media (max-width: 570px) {
#featlist .tbl1 {margin: 35px auto 10px auto; max-width: 400px;} #featlist th, #featlist td {display: block;} #featlist table {width: 100%;}
#featlist .mid {padding: 0;} #featlist .td2 th {border-top: 0 !important;}
}

/*--------------------------------*/