/*@font-face {
    font-family: 'Proxima Nova Th';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Extrabld.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Extrabld.eot#iefix') format('embedded-opentype'),
        url('../fonts/ProximaNova-Extrabld.woff') format('woff2'),
        url('../fonts/ProximaNova-Extrabld.woff') format('woff'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Extrabld.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Extrabld.svg#ProximaNova-Extrabld') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Proxima Nova Rg';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Bold.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Bold.eot#iefix') format('embedded-opentype'),
        url('../fonts/ProximaNova-Bold.woff') format('woff2'),
        url('../fonts/ProximaNova-Bold.woff') format('woff'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Bold.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Alt Cn Th';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.eot#iefix') format('embedded-opentype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.woff2') format('woff2'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.woff') format('woff'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.svg#ProximaNovaACond-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Lt';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Semibold.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Semibold.eot#iefix') format('embedded-opentype'),
        url('../fonts/ProximaNova-Semibold.woff') format('woff2'),
        url('../fonts/ProximaNova-Semibold.woff') format('woff'),
        url('../fonts/ProximaNova-Semibold.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Semibold.svg#ProximaNova-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Lt';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Light.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Light.eot#iefix') format('embedded-opentype'),
        url('../fonts/ProximaNova-Light.woff') format('woff2'),
        url('../fonts/ProximaNova-Light.woff') format('woff'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Light.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Light.svg#ProximaNova-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Rg';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Regular.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Regular.eot#iefix') format('embedded-opentype'),
        url('../fonts/ProximaNova-Regular.woff') format('woff2'),
        url('../fonts/ProximaNova-Regular.woff') format('woff'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Regular.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}*/

@font-face {
    font-family: 'Proxima Nova Th';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Extrabld.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Extrabld.eot#iefix') format('embedded-opentype'),
        url('https://../fonts/ProximaNova-Extrabld.woff') format('woff2'),
        url('https://../fonts/ProximaNova-Extrabld.woff') format('woff'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Extrabld.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Extrabld.svg#ProximaNova-Extrabld') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Proxima Nova Rg';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Bold.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Bold.eot#iefix') format('embedded-opentype'),
        url('https://../fonts/ProximaNova-Bold.woff') format('woff2'),
        url('https://../fonts/ProximaNova-Bold.woff') format('woff'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Bold.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Alt Cn Th';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.eot#iefix') format('embedded-opentype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.woff2') format('woff2'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.woff') format('woff'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNovaACond-Thin.svg#ProximaNovaACond-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Lt';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Semibold.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Semibold.eot#iefix') format('embedded-opentype'),
        url('https://../fonts/ProximaNova-Semibold.woff') format('woff2'),
        url('https://../fonts/ProximaNova-Semibold.woff') format('woff'),
        url('https://../fonts/ProximaNova-Semibold.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Semibold.svg#ProximaNova-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Lt';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Light.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Light.eot#iefix') format('embedded-opentype'),
        url('https://../fonts/ProximaNova-Light.woff') format('woff2'),
        url('https://../fonts/ProximaNova-Light.woff') format('woff'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Light.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Light.svg#ProximaNova-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Rg';
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Regular.eot');
    src: url('https://www.writestyler.com/public/front/fonts/ProximaNova-Regular.eot#iefix') format('embedded-opentype'),
        url('https://../fonts/ProximaNova-Regular.woff') format('woff2'),
        url('https://../fonts/ProximaNova-Regular.woff') format('woff'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Regular.ttf') format('truetype'),
        url('https://www.writestyler.com/public/front/fonts/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =CSS Reset
========================================================================================*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
strike,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol {
    list-style: decimal;
    margin: 0;
    padding: 0 0 0 20px;
    margin: 0 0 15px;
}

ol li {
    margin: 0;
    padding: 0;
}

ul {
    list-style: disc;
    margin: 0;
    padding: 0 0 0 20px;
    margin: 0 0 15px;
}

ul li {
    margin: 0;
    padding: 0;
}

/* =Deafult Tag & General Classes
========================================================================================*/
html,
body {
    -webkit-font-smoothing: antialiased;
    /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
}

body{
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.3;
	font-family: 'Proxima Nova Rg';
}
p{
	margin: 0 0 15px;
}
a{
	color: #252b64;
	text-decoration: none;
	display: inline-block;
	vertical-align: top;
}
a:hover{
	text-decoration: none;
}
img {
    vertical-align: top;
    border: 0;
}

a,
input[type="button"],
input[type="submit"],
button {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
body * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    a:active {
        background-color: transparent;
    }
}

strong {
    font-weight: bold;
	font-family: 'Proxima Nova Rg';
}

p {
    margin: 0 0 10px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Proxima Nova Th';
	margin: 0 0 15px;
	color: #252b64;
	line-height: 1.18;
}

h1, .h1 {
    font-size: 60px;
	font-family: 'Proxima Nova Th';
	color: #252b64;
}

h2 {
    font-size: 50px;
}

h3 {
    font-size: 40px;
}

h4 {
    font-size: 30px;
}

h5 {
    font-size: 20px;
}

.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    zoom: 1;
}

.nodisplay {
    display: none;
}

.nodisplay_strict {
    display: none !important;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}
.textaligncenter {
    text-align: center;
}
.textalignright {
    text-align: right;
}
.textalignleft {
    text-align: left;
}

:focus {
    outline: none;
}

.text_cont p {
    padding: 0 0 10px 0;
}

.nopad p,
p.nopad {
    padding: 0;
}
.btn.focus, .btn:focus{
	box-shadow: none;
}
.btn{
	outline: inherit;
	line-height: 1.2;
	border-radius: 20px;
	border: 0;
	padding: 11px 27px 10px;
	font-size: 16px;
	display: inline-block;
}
.bold{
	font-family: 'Proxima Nova Lt';
	font-weight: 600;
}
.btn.x-long{
	padding: 16px 50px 15px;
	border-radius: 25px;
}
.btn-blue{
	background: #252b64;
	color: #fff;
}
.btn-blue:hover{
	background: #e46d23;
	color: #fff;
}
.mt1{
	margin-top: 10px;
}
.mt2{
	margin-top: 20px;
}
.mt3{
	margin-top: 30px;
}
.mt4{
	margin-top: 40px;
}
.mt5{
	margin-top: 50px;
}
.mt6{
	margin-top: 60px;
}
.mt7{
	margin-top: 70px;
}
.mt8{
	margin-top: 80px;
}
::selection {
    background: #252b64;
    color: #fff;
}
/* =Form Style
========================================================================================*/
html,
body{
	overflow-x: hidden;
}
body{
	padding-top: 103px;
}
body,
.modal-popup .modal-content{
	scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
	scrollbar-color: #252c63 rgba(255,255,255,.2);
}
body::-webkit-scrollbar,
.modal-popup .modal-content::-webkit-scrollbar {
  width: 6px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
	border-radius: 4px;
}
 
body::-webkit-scrollbar-track,
.modal-popup .modal-content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
body::-webkit-scrollbar-thumb,
.modal-popup .modal-content::-webkit-scrollbar-thumb {
  background-color:#252c63;
	border-radius: 4px;
  outline:none;
	height: 100px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
	cursor: pointer;
}
.no-touch body::-webkit-scrollbar-thumb:hover,
.no-touch .modal-popup .modal-content::-webkit-scrollbar-thumb:hover{
	background-color: #252c63;
}
.wrapper{
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px; 
}
/******* Header **********/
header{
	border-bottom: solid 1px #e3e3e3;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 9;
	width: 100%;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.sticky header{
	-webkit-box-shadow: 0 0 8px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0 0 8px rgba(0,0,0,.25);
    box-shadow: 0 0 8px rgb(0 0 0 / 25%);
}
.logo{
	display: inline-block;
	font-size: 0;
	line-height: 0;
	position: relative;
}
.logo > span{
	font-size: 0;
	line-height: 0;
	display: inline-block;
	vertical-align: top;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.sticky .logo > span.logo-text{
	opacity: 0;
	visibility: hidden;
}
.sticky .logo > span.logo-text img{
	max-width: 140px;
}
.logo > span img{
	width: 100%;
	height: auto;
	max-width: 100%;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.header-inner{
	display: table;
	width: 100%;
}
.header-inner > div{
	display: table-cell;
	vertical-align: middle;
}
.header-inner > div.header-left{
	width: 240px;
}
.header-inner > div.header-right{
	width:calc(100% - 240px);
	box-sizing: border-box;
	padding-left: 15px;
}
.header-right-inner{
	font-size: 0;
	line-height: 0;
	text-align: right;
}
.header-right-inner > div{
	display: inline-block;
	vertical-align: middle;
}
.header-right-inner > div + div{
	padding-left: 30px;
}
.navigation ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.navigation ul li{
	display: inline-block;
	vertical-align: top;
	line-height: 1;
	margin: 0;
	margin-right: 34px;
	position:relative;
}
.navigation ul li:last-child{
	margin-right: 0;
}
.navigation ul li a {
	display: block;
	font-size: 16px;
	line-height: 1;
	color:#777777;
	position: relative;
	font-family: 'Proxima Nova Lt';
	padding:44px 0;
}
.navigation ul > .resources a:after { content: ''; background: url(../images/arrow-bottom.svg) no-repeat; background-size: contain; width: 13px; height: 7px; display: inline-block; opacity:0.5; margin-left: 6px; -webkit-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; }
.navigation ul li.resources ul li a:after { display:none; }
.sticky .navigation ul li a { padding:25px 0; }
.navigation ul li a:before{
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    overflow: hidden;
    padding: 0;
    width: 0;
    color:#000;
	font-family: 'Proxima Nova Lt';
    content: attr(data-hover);
    -webkit-transition: width .8s;
    -moz-transition: width .8s;
    transition: width .8s;
    white-space: nowrap;
}
.no-touch .navigation ul li:hover a:before,
.no-touch .navigation ul li a:hover:before,
.navigation ul li.active a:before{
	width: 100%;
}
.no-touch .navigation ul li.resources:hover a:before,
.no-touch .navigation ul li.resources a:hover:before,
.navigation ul li.resources.active a:before { width: calc(100% - 20px); }

.no-touch .navigation ul li.resources:hover a:after,
.no-touch .navigation ul li.resources a:hover:after,
.navigation ul li.resources.active a:after { transform: rotate(-180deg); }

.navigation ul li.create-account-mobile { display: none; }
.navigation ul li:nth-child(7) { margin-right: 0; }
.banner-box-wrap{
	display: table;
	width: 100%;
}
.home-banner ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.banner-box-wrap > div{
	display: table-cell;
	vertical-align: middle;
}
.banner-box-wrap > div.media-box{
	width: 593px;
	
}
.banner-box-wrap .popup-button { display: none; }
.banner-box-wrap > div.media-box .shap-box { 
    height: auto;
}
.banner-box-wrap > div.media-box .shap-box iframe { display: block; border: 0; object-fit: inherit !important; }


.banner-box-wrap .home-media-box { border: 24px solid #152768; border-radius: 30px; position: relative; }
.banner-box-wrap .home-media-box:after { content: ""; width: 10px; height: 10px; background:#fff; border-radius: 100px; position: 
absolute; right: -17px; top: 50%; margin-top:-5px; left: inherit; }
/* Drop Down */
@media (min-width:768px){
.navigation ul li { position:relative; }
.navigation ul li ul { position: absolute; left: 0; top: 100.5%; z-index: 11; width: 250px; background: #242a63; opacity: 0; visibility: hidden; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; text-align:left; }
.navigation ul li:hover ul { opacity: 1; visibility: visible; }
.navigation ul li ul li { margin: 0; display: block; border-bottom: solid 1px #4a529d; }
.navigation ul li ul li:last-child { border:0 none; }
.navigation ul li ul li a,
.sticky .navigation ul li ul li a { padding: 15px 20px; font-weight: normal; text-transform: none; color:#ffffff; }
.navigation ul li ul li a:before { display:none; }
.navigation ul li ul li.active a,
.no-touch .navigation ul li ul li a:hover { color: #242a63; background: #f5f5f5; }
}
@media (max-width:1199px) {
.navigation ul li { margin-right: 20px; }
}
@media (max-width:767px) {
.navigation ul > .resources a:after { margin-left: 10px; background: url(https://www.writestyler.com/public/front/images/arrow-bottom-mobile.svg) no-repeat; background-size: contain; width: 17px; height: 10px; opacity:1; transform: none !important; position: relative; top: -1px; }
.navigation ul > .resources.arrow-up a:after { transform: rotate(-180deg) !important; }
.navigation ul > .resources.active a:after { background: url(https://www.writestyler.com/public/front/images/arrow-bottom-mobile-active.svg) no-repeat; background-size: contain; }
}
/*.banner-box-wrap > div.media-box .shap-box,*/
.left-sharp{
	width: 592px;
	height: 531px;
	-webkit-mask:url(https://www.writestyler.com/public/front/images/video-sharp.png);
    mask: url(https://www.writestyler.com/public/front/images/video-sharp.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/*
.right-sharp{
	width: 370px;
	height: 332px;
	-webkit-mask:url(https://www.writestyler.com/public/front/images/small-shap-left.png);
    mask: url(https://www.writestyler.com/public/front/images/small-shap-left.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
*/

.right-sharp .shap-box{
	height: auto;
}
.banner-box-wrap > div.media-box .shap-box video{
	object-fit: cover;
}
.banner-box-wrap > div.text-box{
	width: calc(100% - 593px);
	box-sizing: border-box;
	padding-right: 100px;
	padding-top: 35px;
}
.banner-cont-box > span{
	display: block;
}
.shap-box{
	position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
	z-index: 3;
}
.home-media-box,
.left-sharp{
	position: relative;
	z-index: 3;
}
.home-media-box:after,
.left-sharp:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	content: "";
	z-index: -1;
	background: url(https://www.writestyler.com/public/front/images/sharp-bg.png) no-repeat center center;
	background-size: cover;
}
.right-sharp-wrap {
    display: inline-block;
    position: relative;
    z-index: 2;
    width: 100%;
    border: 24px solid #152768; 
    border-radius: 30px;
}
.right-sharp-wrap:after { content: ""; width: 10px; height: 10px; background:#fff; border-radius: 100px; position: 
absolute; right: -17px; top: 50%; margin-top:-5px; left: inherit; }
/*
.right-sharp-wrap:after{
	position: absolute;
	top: -12px;
	left: 0;
	width: 100%;
	height: calc(100% + 14px);
	display: block;
	content: "";
	z-index: -1;
	background: url(https://www.writestyler.com/public/front/images/small-shap-left-bg.png) no-repeat center center;
	background-size: cover;
}
*/
.right-sharp-wrap .popup-button{
	left: 30px;
	bottom: 15px;
        display: none;
}
.shap-box video,
.shap-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shap-box iframe { object-fit: inherit; display: block; border: 0; }
.shap-box video::-webkit-media-controls {
  display: none;
}
.section-box{
	padding: 47px 0;
}
.popup-button {
    position: absolute;
    bottom: 0;
    left: 143px;
	z-index: 4;
}
.popup-button a{
	display: block;
	font-size: 0;
	line-height: 0;
	border-radius: 50%;
	position: relative;
	z-index: 2;
}
.popup-button a:after{
	position: absolute;
	left: 8px;
	top: 8px;
	display: block;
	content: "";
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	background: #fff;
	z-index: -1;
	border-radius: 50%;
}
.popup-button a svg path{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.no-touch .popup-button a:hover svg path{
	fill:#252b64;
}
.banner-info-text{
	font-size: 25px;
	color: #777777;
	line-height: 1.2;
	width: 100%;
	max-width: 600px;
	margin-top: 14px;
}
.banner-info-text p{
	margin-bottom: 25px;
}
.banner-info-text p:last-child{
	margin-bottom: 0;
}
.line{
	display: inline-block;
	position: relative;
	z-index: 1;
}
.line:after{
	position: absolute;
	left: 0;
	z-index: -1;
	bottom: -2px;
	width: calc(100% + 10px);
	height:20px;
	display: block;
	content: "";
	background: #ededed;
}
.style-box{
	margin-top: 29px;
}
.style-box .style-section-title{
	margin: 0;
	color: #000;
	font-size: 25px;
	line-height: 1;
	font-family: 'Proxima Nova Lt';
	font-weight: 600;
}
.style-box ul{
	margin: 0 -15px;
	padding: 0;
	list-style: none;
	font-size: 0;
	margin-top: 22px;
}
.style-box ul li{
	display: inline-block;
	width: 33.33%;
	vertical-align: top;
	padding: 0 15px;
	box-sizing: border-box;
	max-width: 199px;
}
.style-box ul li a{
	display: block;
}
.style_box{
	display: block;
	border: solid 2px #eef0f7;
	box-sizing: border-box;
	border-radius: 20px;
	padding: 24px 15px 24px;
	text-align: center;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.no-touch .style_box:hover{
	box-shadow: 0 8px 0 rgb(37 61 229 / 5%);
        border: solid 2px #252b64; 
}
.svg-icon{
	display: inline-block;
	font-size: 0;
	line-height: 0;
}
.style_box .style-box-icon{
	display: table;
	width: 100%;
	height: 80px;
}
.style_box .style-box-icon img{
	width: 100%;
	height: auto;
	max-width: 130px;
}
.style-box-icon-inner{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.style_box .style-box-text{
	display: block;
	text-align: center;
	font-size: 20px;
	line-height: 1;
	color: #000;
	margin-top: 17px;
}
.video-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
	opacity: 0;
	visibility: hidden;
    z-index: 99;
    background: #000;
	overflow: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #252c63 rgba(255,255,255,.2);
	transform: scale(.07);
    transform-origin: 100% 100% 0;
    -webkit-transform: scale(.07);
    -webkit-transform-origin: 100% 100% 0;
    transition: all .5s ease-out 0s;
}
.video-popup::-webkit-scrollbar{
  width: 6px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
	border-radius: 4px;
}
 
.video-popup::-webkit-scrollbar-track{
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
.video-popup::-webkit-scrollbar-thumb{
  background-color:#252c63;
	border-radius: 4px;
  outline:none;
	height: 100px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
	cursor: pointer;
}
.video-popup .popup-video-box{
	display: table;
	width: 100%;
	height: 100%;
}
.video-popup .popup-video-box .popup-video-box-inner{
	padding: 30px;
	display: table-cell;
	vertical-align: middle;
}
.video-wrap{
	 position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-wrap video,
.video-wrap iframe{
	position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	/*object-fit: cover;*/
}
.video-popup .popup-video-box .video-wrap{
	max-width: 1000px;
	margin: 0 auto;
	height: 600px;
	padding-bottom: 0;
}
a.video-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
}
a.video-popup-close svg{
	width: 24px !important;
	height: 24px !important;
}
.video-full .video-popup{
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: visible;
	    transform: scale(1);
    -webkit-transform: scale(1);
}
/*******/
/****** Product Box *******/
h2.section-title{
	margin-bottom: 12px;
	font-family: 'Proxima Nova Rg';
	font-weight: 700;
}
.grey-bg-design{
	position: relative;
}
.grey-bg-design:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 47px;
	background: url(../images/grey-top.png) no-repeat center center;
	background-size: cover;
	display: block;
	content: "";
}
.grey-bg-design:after{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 47px;
	background: url(../images/grey-bottom.png) no-repeat center center;
	background-size: cover;
	display: block;
	content: "";
}
.grey-bg{
	padding: 60px 0;
	background: #f5f5f3;
}
.section-info{
	font-size: 24px;
	line-height: 1.55;
	color: #363636;
}
.section-info p:last-child{
	margin-bottom: 0;
}
ul.product-box-list{
	margin: 20px -25px 0;
	padding: 0;
	list-style: none;
	font-size: 0;
	display: flex;
	-webkit-display: flex;
	-ms-display: flex;
	-o-display: flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-o-flex-wrap: wrap;
}
ul.product-box-list > li{
	margin: 0;
	padding: 0 25px;
	display: inline-block;
	vertical-align: top;
	width: 25%;
	box-sizing: border-box;
	margin-top: 104px;
}
li.product-box a{
	display: block;
	position: relative;
	height: 100%;
}
.product-box .pro-box{
	position: relative;
	background: #fff;
	padding: 87px 25px 29px;
	position: relative;
	box-sizing: border-box;
	height: 100%;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.no-touch .product-box .pro-box:hover{
	    -webkit-box-shadow: 7px 3px 10px 0px rgb(0 0 0 / 7%);
    -moz-box-shadow: 7px 3px 10px 0px rgba(0, 0, 0, 7%);
    box-shadow: 7px 3px 10px 0px rgb(0 0 0 / 7%);
}
.product-info{
	font-size: 16px;
	color: #363636;
	line-height: 1.5;
	font-family: 'Proxima Nova Rg';
	text-align: center;
}
.product-info p:last-child{
	margin-bottom: 0;
}
.product-title{
	text-align: center;
	font-size: 20px;
	color: #000000;
	line-height: 1;
	font-family: 'Proxima Nova Th';
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.no-touch .product-box .pro-box:hover .product-title{
	color: #252b64;
}
.pro-box-icon{
	display: table;
	width:105px;
	height:105px;
	border-radius: 50%;
	background: #e46c23;
	margin: 0 auto;
	position: absolute;
    top: -55px;
    left: 50%;
	margin-left: -55px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.no-touch .product-box .pro-box:hover .pro-box-icon{
	background: #252b64;
}
.product-icon{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding:0;
}
.product-icon img{
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
}
/*****/
.section-box.product-info-sec{
	padding: 90px 0 0;
}
.product-info-box{
	display: table;
	width: 100%;
}
.product-info-box + .product-info-box{
	margin-top: 50px;
}
.product-info-box > div{
	display: table-cell;
	vertical-align: top;
}
.product-info-box > div:first-child{
	min-width: 700px;
}
.product-info-box > div + div{
	padding-left: 35px;
}
.product-info-box > div + div .img-box{
	padding-left: 50px;
}
.product_information{
	font-size: 20px;
	line-height: 1.85;
	color: #363636;
	width: 100%;
	max-width: 640px;
}
.product_information p:last-child{
	margin-bottom: 0;
}
.product_information + .product_button-sec{
	margin-top: 33px;
}
.product_title{
	margin-bottom: 23px;
	font-family: 'Proxima Nova Rg';
	font-weight: 700;
}
.top{
	vertical-align: top !important;
}
.middle{
	vertical-align: middle !important;
}
.bottom{
	vertical-align: bottom !important;
}
.product-info-box > div + div .product-info-cont{
	padding-top: 20px;
}
.classroom-info {
	margin: 0;
	font-size: 0;
}
.classroom-info > div{
	display: inline-block;
	vertical-align: middle;
}
.classroom-info > div.classroom-info-sec{
	box-sizing: border-box;
	padding-left: 0;
	width: calc(100% - 592px);
}
.classroom-info > div.classsroom-video{
	width: 592px;
	box-sizing: border-box;
	padding-left: 50px;
	text-align: right;
}
.classroom-info-sec{
	font-size: 24px;
	color: #363636;
	line-height: 1.55;
}
.classroom-info-sec p.small-title{
	font-size: 24px;
	font-family: 'Proxima Nova Th';
	font-weight: 700;
}
.classroom-info-sec p:last-child{
	margin-bottom: 0;
}
.classroom-info-sec .section-title{
	line-height: 1.1;
}
.classroom-info-text {
    margin-top: 20px;
}
.class-button-sec {
    margin-top: 27px;
}
.classroom-sec .grey-bg{
	padding-bottom: 35px;
	padding-top: 40px;
}
.tab-row{
	position: relative;
	font-size: 0;
}
.tab-row > div{
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}
.tab-row > div.left-tool-box{
	width: 575px;
	padding-top: 57px;
}
.tab-row > div.right-img-box{
	float: right;
}
.tab-row:after{
	clear: both;
	display: block;
	content: "";
}
.tab-box .nav-link{
	padding: 20px;
	background: #fff;
	font-size: 18px;
	line-height: 1.4;
	color: #363636;
	border-radius: 20px;
	    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.tab-box + .tab-box{
	margin-top: 15px;
}
.tab-box .nav-link.active-a,
.no-touch .tab-box .nav-link:hover{
	background: #fff;
	background-color: #fff;
	color: #363636;
	    -webkit-box-shadow: 7px 3px 10px 0px rgb(0 0 0 / 7%);
    -moz-box-shadow: 7px 3px 10px 0px rgba(0, 0, 0, 7%);
    box-shadow: 7px 3px 10px 0px rgb(0 0 0 / 7%);
}
.tool-title-box{
	display: table;
	width: 100%;
}
.tool-title-box > span{
	display: table-cell;
	vertical-align: middle;
}
.tool-title-box > span.tool-icon-box{
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: #e46c23;
	    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
	line-height: 0;
	font-size: 0;
	text-align: center;
}
.tab-box .img-box {
    position: absolute;
    top: 0;
    width: calc(100% - 575px);
    right: 0;
    height: 100%;
    text-align: right;
	opacity: 0;
	visibility: hidden;
	padding-left: 100px;
	box-sizing: border-box;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.tab-box .img-box.tab-active{
	opacity: 1;
	visibility: visible;
}
.img-box-box-wrap {
    display: table;
    height: 100%;
    width: 100%;
}
.img-box-box-img{
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}
.img-box-box-img img{
	width: 100%;
	max-width: 100%;
	height: auto;
}
span.tool-icon {
    display: inline-block;
    line-height: 0;
}
.tool-title-box > span.tool-time{
	padding-left: 32px;
	line-height: 1;
	font-size: 24px;
	color: #363636;
	font-family: 'Proxima Nova Rg';
	font-weight: bold;
	    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.tool-box-info{
	padding-left: 102px;
	font-size: 18px;
	color: #363636;
}
.tool-box-info p{
	margin-bottom: 10px;
}
.tool-box-info p:last-child{
	margin-bottom: 0;
}
.tab-box .nav-link.active-a .tool-title-box > span.tool-icon-box,
.no-touch .tab-box .nav-link:hover .tool-title-box > span.tool-icon-box{
	background: #252b64;
	background-color: #252b64;
}
.tab-box .nav-link.active-a .tool-title-box > span.tool-time,
.no-touch .tab-box .nav-link:hover .tool-title-box > span.tool-time{
	color: #252b64;
}
.tool-section h2.section-title{
	margin-bottom: 68px;
}
section.tool-section.section-box {
    padding-top: 30px;
}
.left-tool-box .section-button{
	padding-left: 122px;
	margin-top: 20px;
}
.progress-img-box-wrap{
	margin: 0 -15px;
	font-size: 0;
}
.progress-img-box-wrap > div{
	display: inline-block;
	vertical-align: top;
	width: 25%;
	padding: 0 15px;
	text-align: center;
	box-sizing: border-box;
}
.progress-img-box-info .progress-img-title{
	margin: 0 0 18px;
	font-size: 24px;
	font-weight: bold;
	font-family: 'Proxima Nova Rg';
	color: #363636;
}
.progress-img-box-info{
	margin-top: 30px;
	font-size: 18px;
	color: #363636;
}
.progress-img-text {
	line-height: 1.4;
	padding: 0 15px;
}
.progress-img-text p:last-child{
	margin-bottom: 0;
}
.progress-img-section{
	position: relative;
	margin-top: 70px;
}
.progress-img-section .progress-img-section-bg{
	position: absolute;
    top: 0;
    left: 0;
	height: 100%;
    width: calc(100% + 214px);
    height: 100%;
	background: url(../images/progress-img-bg.jpg) 50% 0 no-repeat;
    z-index: -1;
    margin: 0 -107px;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition: transform .7s cubic-bezier(.27,-.22,.26,1.37),opacity .15s ease-in;
    -moz-transition: transform .7s cubic-bezier(.27,-.22,.26,1.37),opacity .15s ease-in;
    transition: transform .7s cubic-bezier(.27,-.22,.26,1.37),opacity .15s ease-in;
	-webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    transform-origin: 0 50%;
	animation-delay: 4s;
}
/*****/
/***** Footer ******/
.top-footer{
	background: #f8f8f8;
	padding: 40px 0;
}
.social-section ul{
	margin: 0 -10px;
	padding: 0;
	list-style: none;
	font-size: 0;
}
.social-section ul li{
	padding: 0 10px;
	display: inline-block;
	vertical-align: top;
	margin: 0;
}
.social-section ul li a{
	display: inline-block;
	font-size: 0;
}
.top-footer-box-wrap{
	margin: 0 -10px;
	font-size: 0;
}
.top-footer-box-wrap > div{
	display: inline-block;
	vertical-align: top;
	width: 50%;
	padding: 0 10px;
	box-sizing: border-box;
}
.footer-logo + .social-section{
	margin-top: 14px;
}
.footer-logo a{
	display: inline-block;
	vertical-align: top;
}
.contact-box{
	font-size: 18px;
	color: #000000;
}
.contact-box a{
	color: #000000;
}
.no-touch .contact-box a:hover{
	color: #e46c23;
}
.info-box p{
	margin-bottom: 0;
}
.contact-box div a span{
	display: inline-block;
	vertical-align: middle;
}
.contact-box div a span.icon{
	font-size: 0;
	line-height: 0;
	margin-right: 6px;
}
.phone-number a span.icon{
	position: relative;
	top: -3px;
}
.contact-box div.email-address{
	margin-top: 5px;
}
.contact-box div.info-box{
	margin-top: 15px;
}
.bottom-footer{
	background: #efefef;
	padding-top: 56px;
    padding-bottom: 40px;
}
.footer-box-wrap{
	display: table;
	width: 100%;
}
.footer-box-wrap > div{
	display: table-cell;
}
.footer-box-wrap > div:nth-child(1){
	width: 26.2%;
}
.footer-box-wrap > div:nth-child(2){
	width: 24.6%;
}
.footer-box-wrap > div:nth-child(3){
	width: 20.8%;
}
.footer-box-wrap > div:nth-child(4){
	width: 29.2%;
}
.footer-box-title{
	color: #363636;
	font-size: 18px;
	line-height: 1;
	margin-bottom: 0;
	font-family: 'Proxima Nova Rg';
	font-weight: bold;
}
.footer-box-contain ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-box-contain ul li{
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
}
.footer-box-contain ul li + li{
	margin-top: 14px;
}
.footer-box-contain ul li a{
	display: inline-block;
	position: relative;
	font-size: 17px;
	color: #363636;
	line-height: 1;
}
.no-touch .footer-box-contain ul li a:hover,
.footer-box-contain ul li.active a,
.footer-box-contain ul li a.active{
	color: #e46d23;
}
.footer-box-contain{
	font-size: 17px;
	color: #363636;
	margin-top: 30px;
}
.footer-box-contain p{
	margin-bottom: 0;
	position: relative;
	top: -2px;
	line-height: 1.45;
}
.newsletter form{
	position: relative;
}
.newsletter form input{
	width: 100%;
	border: 0;
	box-shadow: none;
	background: #fff;
	height: 50px;
	border-radius: 25px;
	padding: 0 120px 0 24px;
	font-size: 16px;
	color: #000;
	font-family: 'Proxima Nova Lt';
	font-weight: 300;
}
.newsletter form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  	font-size: 14px;
	color: #000;
	font-family: 'Proxima Nova Lt';
	font-weight: 300;
	opacity: 1;
}
.newsletter form input::-moz-placeholder { /* Firefox 19+ */
  	font-size: 14px;
	color: #000;
	font-family: 'Proxima Nova Lt';
	font-weight: 300;
	opacity: 1;
}
.newsletter form input:-ms-input-placeholder { /* IE 10+ */
  	font-size: 14px;
	color: #000;
	font-family: 'Proxima Nova Lt';
	font-weight: 300;
	opacity: 1;
}
.newsletter form input:-moz-placeholder { /* Firefox 18- */
  	font-size: 14px;
	color: #000;
	font-family: 'Proxima Nova Lt';
	font-weight: 300;
	opacity: 1;
}
.newletter-button{
	position: absolute;
	top: 5px;
	right: 6px;
}
.footer-box-contain .newsletter{
	margin-top: 20px;
}
.copyright-box-wrap{
	margin: 0 -10px;
	font-size: 0;
}
.copyright-box-wrap > div{
	display: inline-block;
	vertical-align: middle;
	padding: 0 10px;
	width: 50%;
}
.copyright-box-wrap > div + div{
	text-align: right;
}
.copyright{
	background: #e1e1e1;
	padding: 6px 0;
}
.copyright-box-wrap > div p{
	font-size: 14px;
	margin: 0;
	color: #363636;
}
/****** FAQ ******/
.inner-banner-img{
	position: relative;
	font-size: 0;
	line-height: 0;
	/*overflow: hidden;
	height: 450px;*/
}
.inner-banner-img img{
	position: relative;
    /*left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    min-width: 100%;*/
	width: 100% !important;
    height: auto !important;
}
.inner-banner-img:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	content: "";
	background: rgba(0,0,0,0.52);  
}
section.inner-bnner {
    position: relative;
}
.inner-banner-breadcrumbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.breadcrumbs-wrap{
	display: table;
	width: 100%;
	height: 100%;
}
.breadcrumbs{
	display: table-cell;
	vertical-align: middle;
}
.breadcrumbs ul{
	text-align: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0;
}
.breadcrumbs ul li{
	display: inline-block;
	vertical-align: middle;
	font-size: 24px;
	line-height: 1;
	padding: 0 30px;
	position: relative;
}
.breadcrumbs ul li:after{
	position: absolute;
	top: 2px;
	right: 0;
	content: "/";
	color: #fff;
	font-size: 24px;
}
.breadcrumbs ul li:last-child:after{
	display: none;
}
.breadcrumbs ul li a,
.breadcrumbs ul li strong{
	color: #fff;
	line-height: 1;
	font-weight: normal;
}
.no-touch .breadcrumbs ul li a:hover{
	color: #e46d23;
}
section.inner-bnner:after{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 70px;
	display: block;
	content: "";
	background: url(https://www.writestyler.com/public/front/images/inner-banner-bg.png) repeat-x left bottom;
	background-size: contain;
}
.owl-dots{
	text-align: center;
	margin-top: 24px;
}
.owl-dots button{
	width: 12px;
	height: 12px;
	border: solid 1px #2f356a !important;
	    box-sizing: border-box;
    border-radius: 50% !important;
    margin: 0 4px;
    outline: none !important;
}
.owl-dots button.active{
	background: #e46c23;
	border-color: #e46c23 !important;
}

.faq-main-title { margin: 30px 0 15px; text-align: center; }
.faq-box{
	-webkit-box-shadow: 2px 1px 9px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow:    2px 1px 9px 0px rgba(0, 0, 0, 0.1);
	box-shadow:         2px 1px 9px 0px rgba(0, 0, 0, 0.1);
	padding: 0 75px;
	border-radius: 15px;
}
footer {
    margin-top: 70px;
}
.faq-item h4.faq-title{
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 600;
	font-family: 'Proxima Nova Lt';
	cursor: pointer;
	position: relative;
	padding-right: 100px;
}
.faq-item h4.faq-title:after{
	position: absolute;
	top: 0;
	right: 0;
	width: 57px;
	height: 100%;
	display: block;
	content: "";
	background: url(https://www.writestyler.com/public/front/images/plus-icon.svg) no-repeat top center;
	background-size: 20px;
}
.faq-item.active h4.faq-title:after{
	background: url(https://www.writestyler.com/public/front/images/minus.svg) no-repeat top center;
	background-size: 20px;
}
.ans{
	color: #323232;
	line-height: 1.4;
	font-size: 18px;
	display: none;
	margin-top: 20px;
	padding-right: 100px;
	width: 100% !important;
} 
.ans p{
	margin-bottom: 15px;
}
.ans p:last-child{
	margin-bottom: 0;
}
.ans ul{
	margin: 20px 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}
.ans ul:last-child{
	margin-bottom: 0;
}
.ans ul:first-child{
	margin-top: 0;
}
.ans ul li{
	display: block;
	position: relative;
	line-height: 1.2;
	padding-left: 20px;
}
.ans ul li + li{
	margin-top: 10px;
}
.ans ul li:after{
	position: absolute;
	top: 5px;
	left: 0;
	width: 8px;
	height: 8px;
	display: block;
	content: "";
	background: #323232;
	border-radius: 50%;
}
.ans ol{
	margin: 20px 0;
}
.ans ol:first-child{
	margin-top: 0;
}
.ans ol:last-child{
	margin-bottom: 0;
}
.ans ol li + li{
	margin-top: 10px;
}
.ans a{
	color: #e46c23;
}
.no-touch .ans a:hover{
	color: #323232;
}
.faq-item{
	padding: 40px 0 40px 0;
	border-bottom: solid 2px #efefef;
}
.faq-box-sec .ans img { max-width: 100%; }
.faq-item:last-child{
	border-bottom: 0;
}
.page-tagline{
	font-size: 24px;
	color: #363636;
	margin-bottom: 12px;
}
.page-title h1{
	font-weight: bold;
	font-family: 'Proxima Nova Rg';
	margin: 0;
	line-height: 1;
}
section.page-title {
    padding-top: 40px;
	padding-bottom: 50px;
}
.pt0{
	padding-top: 0 !important
}
.pb0{
	padding-bottom: 0 !important;
}
/******/
/****** Contact Page *******/
.contact-box-wrap{
	font-size: 0;
}
.contact-box-wrap > div{
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
    font-size: 14px;
}
.contact-box-wrap > div.contact-information-box{
	width: 440px;
	padding-right: 75px;
}
.contact-box-wrap > div.contact-form-box{
	width: calc(100% - 440px);
}
.contact_box_info h4{
	margin: 0;
	font-weight: bold;
	font-family: 'Proxima Nova Rg';
}
.contact_box_info{
	margin-top: 15px;
}
.contact_box_cont{
	font-size: 20px;
	line-height: 1.8;
	margin-bottom: 16px; 
}
.contact_box_cont p{
	margin-bottom: 15px;
}
.contact_box_cont p:last-child{
	margin-bottom: 0;
}
.phone_box,
.email_box{
	font-size: 20px;
	line-height: 1;
}
.phone_box a,
.email_box a{
	color: #252b64;
	font-weight: bold;
    font-family: 'Proxima Nova Rg';
}
.no-touch .phone_box a:hover,
.no-touch .email_box a:hover{
	color: #e46d23;
}
.phone_box{
	margin-bottom: 11px; 
}
.contact-box-wrap > div.contact-form-box{
	border-radius: 15px;
	padding: 30px 30px 40px;
	    -webkit-box-shadow: 2px 1px 9px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 2px 1px 9px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 1px 9px 0px rgb(0 0 0 / 10%);
}
.contact_inq_form{
	margin: 0 -12px;
	font-size: 0;
}
.contact_inq_form > div{
	display: inline-block;
	vertical-align: top;
	padding: 0 12px;
	width: 50%;
	box-sizing: border-box;
}
.contact_inq_form > div.form-title,
.contact_inq_form > div.full-width{
	width: 100%;
}
input[type="text"],
input[type="password"],
input[type="url"], 
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="datetime"],
input[type="email"]{
	border: solid 1px #c6ccdc;
	border-radius: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 0 27px;
	height: 50px;
	font-size: 16px;
	color: #363636;
	font-family: 'Proxima Nova Rg';
	line-height: 1.42857143;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
} 
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  	font-size: 16px;
	color: #363636;
	font-family: 'Proxima Nova Rg';
	opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
	font-size: 16px;
	color: #363636;
	font-family: 'Proxima Nova Rg';
	opacity: 1;
}
:-ms-input-placeholder { /* IE 10+ */
  	font-size: 16px;
	color: #363636;
	font-family: 'Proxima Nova Rg';
	opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
  	font-size: 16px;
	color: #363636;
	font-family: 'Proxima Nova Rg';
	opacity: 1;
}
.field-box-inner{
	position: relative;
}
.field-box{
	margin-bottom: 30px;
}
select{
	border: solid 1px #c6ccdc;
	border-radius: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 0 27px;
	height: 50px;
	font-size: 16px;
	color: #363636;
	font-family: 'Proxima Nova Rg';
	line-height: 1.42857143;
	cursor: pointer;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	padding-right: 50px;
	background: url(https://www.writestyler.com/public/front/images/select-arrow.svg) no-repeat;
	background-position: calc(100% - 23px) center;
	background-size: 18px;
}
textarea{ 
	border: solid 1px #c6ccdc;
	border-radius: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 19px 27px;
	height: 120px;
	font-size: 16px;
	color: #363636;
	font-family: 'Proxima Nova Rg';
	line-height: 1.42857143;
	resize: none;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.contact_inq_form > div.submit-box{
	text-align: right;
    width: 100%;
}
.contact_inq_form > div.form-title h4{
	margin: 0 0 27px;
	padding: 0;
	color: #252b64;
	font-weight: bold;
    font-family: 'Proxima Nova Rg';
	font-size: 20px;
}
.mb0{
	margin-bottom: 0 !important;
}
/******/
/****** About Page *******/
.right-shap-big{
	width: 601px;
    height: 540px;
    -webkit-mask: url(https://www.writestyler.com/public/front/images/v_shap-right.png);
    mask: url(https://www.writestyler.com/public/front/images/v_shap-right.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.right-big-sharp-wrap:after{
	background: url(https://www.writestyler.com/public/front/images/v_shap-right-bg.png) no-repeat center center;
}
.right-shap-big .shap-box{
	height: 540px;
}
.button-right .popup-button{
	left: inherit;
	right: 92px;
}
.about-box-wrap{
	font-size: 0;
}
.about-box-wrap > div{
	display: inline-block;
	vertical-align: middle;
}
.about-box-wrap > div.about-left{
	width: 601px;
}
.about-box-wrap > div.about-right{
	width: calc(100% - 601px);
	padding-left: 100px;
	box-sizing: border-box;
}
.about-cont p.tag-line{
	font-size: 24px;
	line-height: 1.5;
	margin: 0;
	margin-top: 7px;
}
.aboutcont_box{
	font-size: 22px;
	line-height: 1.7;
	margin-top: 30px;
}
.aboutcont_box p{
	margin-bottom: 15px;
}
.aboutcont_box p:last-child{
	margin-bottom: 0;
}
.about-cont .section-title{
	margin-bottom: 0;
}
.about-button{
	margin-top: 17px;
}
.orange-bg-box{
	padding: 50px 0 70px;
	background: #e46c23;
}
.orange-bg-box .section-title{
	color: #fff;
}
.plan-box-wrap{
	margin: 0 -15px;
	font-size: 0;
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	-m-flex-wrap: wrap;
}
.plan-box-wrap > div{
	display: inline-block;
	vertical-align: top;
	width: 33.33%;
	padding: 0 15px;
	box-sizing: border-box;
	text-align: center;
}
.plan-box-inner{
	position: relative;
	height: 100%;
	-webkit-box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow:    0px 2px 9px 0px rgba(0, 0, 0, 0.1);
box-shadow:         0px 2px 9px 0px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	overflow: hidden;
}
.plan-title{
	margin: 0;
	padding: 13px 10px 13px;
	background: #e46d23;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	text-transform: uppercase;
	font-weight: bold;
    font-family: 'Proxima Nova Rg';
}
.unlimited-plan .plan-title{
	background: #252c63;
}
.premium-plan .plan-title{
	background: #449d46;
}
.plan-info{
	padding: 0 33px 220px; 
	position: relative;
	height: calc(100% - 44px);
    box-sizing: border-box;
}
.plan-button { 
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 33px;
}
.plan-price{
	display: table;
	width: 100%;
	min-height: 185px;
}
.plan-price-inner{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.plan-price-inner span{
	font-size: 40px;
	line-height: 1;
	font-family: 'Proxima Nova Th';
	font-weight: bold;
	display: block;
	text-align: center;
}
.basic-plan .plan-price-inner span{
	color: #e46d23;
	font-size: 60px;
	text-transform: uppercase;
}
.basic-plan .user-plan-oprion-text{
	color: #e46d23;
}
.unlimited-plan .plan-price-inner span,
.unlimited-plan .user-plan-oprion-text{
	color: #252c63;
}
.premium-plan .plan-price-inner span,
.premium-plan .user-plan-oprion-text{
	color:#449d46;
}
.plan-price-inner span.user-info{
	font-size: 18px;
	line-height: 1;
	font-family: 'Proxima Nova Lt';
	font-weight: 600;
	color: #8d8fa6;
	margin-top: 2px;
}
.orange{
	color: #e46d23;
}
.blue{
	color: #252c63;
}
.green{
	color:#449d46 !important;
}
h6.box-info-title {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 19px;
    color: #000;
	font-weight: bold;
    font-family: 'Proxima Nova Rg';
}
.student-info,
.teachers-info{
	text-align: left;
}
.student-info{
	min-height: 400px;
}
.student-info + .teachers-info{
	margin-top: 44px;
}
.user-plan-oprion-text{
	font-size: 19px;
	line-height: 1.25;
	font-family: 'Proxima Nova Lt';
    font-weight: 600;
	margin-top: 12px;
}
.user-plan-oprion-text p{
	margin-bottom: 15px;
}
.user-plan-oprion-text p:last-child{
	margin-bottom: 0;
}
.user-plan-oprion-text ul{
	margin: 25px 0 0 0;
	padding: 0;
	list-style: none;
	color: #868686;
	font-size: 16px;
	line-height: 1.2;
	font-family: 'Proxima Nova Rg';
	font-weight: normal;
}
.user-plan-oprion-text ul li{
	margin: 0;
	padding: 0;
	padding-left: 25px;
	position: relative;
}
.user-plan-oprion-text ul li:after{
	position: absolute;
	top: 3px;
	left: 0;
	width: 15px;
	height: 100%;
	display: block;
	content: "";
}
.basic-plan .user-plan-oprion-text ul li:after{
	background: url(https://www.writestyler.com/public/front/images/orange-arrow.svg) no-repeat left top;
	background-size: 16px;
}
.unlimited-plan .user-plan-oprion-text ul li:after{
	background: url(https://www.writestyler.com/public/front/images/blue-arrow.svg) no-repeat left top;
	background-size: 16px;
}
.premium-plan .user-plan-oprion-text ul li:after{
	background: url(https://www.writestyler.com/public/front/images/green-arrow.svg) no-repeat left top;
	background-size: 16px;
}
.user-plan-oprion-text ul li + li{
	margin-top: 12px;
}
.orange-bg{
	position: relative;
	padding: 41px 0;
}
.orange-bg:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 41px;
	display: block;
	content: "";
	background: url(https://www.writestyler.com/public/front/images/orange-bg-top.png) no-repeat bottom left;
	background-size: cover;
}
.orange-bg:after{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 41px;
	display: block;
	content: "";
	background: url(https://www.writestyler.com/public/front/images/orange-bg-bottom.png) no-repeat bottom left;
	background-size: cover;
}

.basic-plan .plan-button .btn{
	background: #e46c23;
	color: #fff;
}
.unlimited-plan .plan-button .btn{
	background: #252c63;
	color: #fff;
}
 .premium-plan .plan-button .btn{
	background: #449d46;
	color: #fff;
}
.no-touch .premium-plan .plan-button .btn:hover,
.no-touch .unlimited-plan .plan-button .btn:hover{
	background: #d6611a;
	color: #fff; 
}
.no-touch .basic-plan .plan-button .btn:hover{
	background: #252c63;
	color: #fff;
}
.plan-button .btn{
	width: 100%;
	font-size: 19px;
}
.more-link{
	text-align: center;
	margin-top: 22px; 
}
.more-link a{
	line-height: 1;
	font-size: 17px; 
	    font-family: 'Proxima Nova Lt';
    font-weight: 600;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
.more-link a span{
	display: block;
}
.more-link a span + span{
	margin-top: 6px;
}
.more-link a span svg path{
	    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.basic-plan .more-link a{
	color: #e46c23;
}
.unlimited-plan .more-link a{
	color: #252c63;
}
.premium-plan .more-link a{
	color: #449d46;
}
.no-touch .premium-plan .more-link a:hover,
.no-touch .unlimited-plan .more-link a:hover{
	color: #e46c23;
}
.no-touch .basic-plan .more-link a:hover{
	color: #252c63;
}
.no-touch .unlimited-plan .more-link a:hover span svg path,
.no-touch .premium-plan .more-link a:hover span svg path{
	fill:#e46c23;
}
.no-touch .basic-plan .more-link a:hover span svg path{
	fill:#252c63;
}
.plan-detail-info{
	border: solid 1px #e1e1e1;
}
.plan-compare-box .plan-detail-info table{
	width: 100%;
}
table.plan_info .detail-title{
	margin: 0;
	line-height: 1;
	font-size: 40px;
}
table.plan_info tr th{
	line-height: 1;
	font-size: 20px;
	color: #252c63;
	margin: 0;
	    font-weight: bold;
    font-family: 'Proxima Nova Rg';
	vertical-align: baseline;
	border-bottom: solid 2px #888888;
	padding: 25px 15px 22px;
	text-align: center;
}
table.plan_info tr th:first-child{
	padding-left: 37px;
	text-align: left;
}
table.plan_info tr th:last-child{
	padding-right: 37px;
}
.body-wrap table tbody tr td{
	text-align: center;
	font-size: 18px;
	line-height: 1;
	    font-family: 'Proxima Nova Lt';
    font-weight: 600;
	vertical-align: middle;
	padding: 26px 15px 25px;
}
.body-wrap table tbody tr td:first-child{
	padding-left: 0;
}
.body-wrap table tbody tr td:last-child{
	padding-right: 0;
}
.body-wrap{
	padding: 0 37px;
}
.body-wrap table tbody tr td.option-name{
	font-family: 'Proxima Nova Rg';
	font-weight: 400;
	font-size: 16px;
	max-width: 380px;
}
.body-wrap table tbody tr td:first-child{
	text-align: left;
}
.body-wrap table tr + tr{
	border-top: solid 2px #f1f1f1;
	background: #fff;
}
.body-title{
	margin: 0;
	padding: 0;
	line-height: 1;
	text-transform: uppercase;
	font-size: 30px;
	color: #252c63;
	font-weight: bold;
    font-family: 'Proxima Nova Rg';
}
.body-wrap table tbody tr td span.title{
	line-height: 1;
    font-size: 20px;
    color: #252c63;
    margin: 0;
    font-weight: bold;
    font-family: 'Proxima Nova Rg';
	display: block;
}
.body-wrap table tbody tr th{
	line-height: 1;
    font-size: 20px;
    color: #252c63;
    margin: 0;
    font-weight: bold;
    font-family: 'Proxima Nova Rg';
	padding: 34px 15px 28px;
	text-align: center;
	vertical-align: middle;
}
.body-wrap table tbody tr th:first-child{
	padding-left: 0;
	text-align: left;
}
.body-wrap table tbody tr th:last-child{
	padding-right: 0;
}
.body-wrap.teachers-box {
    background: #f7f7f7;
	border-top: solid 2px #858585;
	box-sizing: border-box;
}
.body-wrap.teachers-box table tbody tr td{
	padding: 26px 20px 25px;
}
.body-wrap.teachers-box table tbody tr th{
	padding: 41px 15px 21px
}
.body-wrap.teachers-box table tbody tr th:first-child{
	padding-left: 0;
}
.body-wrap.teachers-box table tbody tr th:last-child{
	padding-right: 0;
}
section.plan-detail-sec {
    padding-top: 45px;
}
.subscription-button-box{
	margin: 0 -48px;
	font-size: 0;
	padding: 43px 0 45px;
}
.subscription-button-box > div{
	display: inline-block;
	vertical-align: top;
	padding: 0 48px;
	box-sizing: border-box;
	width: 33.33%;
	text-align: center;
}
.subscription-button-inner h5.plan-name{
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	font-size: 25px;
	font-weight: bold;
    font-family: 'Proxima Nova Rg';
}
.subscription-button-inner h5.plan-name:after{
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	display: block;
	content: "";
	height: 5px;
	width: 74px;
	margin-top: -2px;
}
.basic-plan .subscription-button-inner h5.plan-name:after{
	background: rgba(239,88,32,0.21);
}
.unlimited-plan .subscription-button-inner h5.plan-name:after{
	background: rgba(37,44,99,0.21);
}
.premium-plan .subscription-button-inner h5.plan-name:after{
	background: rgba(68,157,70,0.21);
}
.subscription-button-inner .btn{
	width: 100%;
	color: #fff;
	font-size: 19px;
	margin-top: 20px;
}
.basic-plan .subscription-button-inner .btn{
	background: rgba(239,88,32,1);
}
.unlimited-plan .subscription-button-inner .btn{
	background: rgba(37,44,99,1);
}
.premium-plan .subscription-button-inner .btn{
	background: rgba(68,157,70,1);
}
.body-wrap.teachers-box table tbody tr:last-child{
	border-bottom: solid 2px #f1f1f1;
}
.no-touch .basic-plan .subscription-button-inner .btn:hover{
	background: rgba(37,44,99,1);
}
.no-touch .premium-plan .subscription-button-inner .btn:hover,
.no-touch .unlimited-plan .subscription-button-inner .btn:hover{
	background: rgba(239,88,32,1);
}
.note_info{
	font-size: 18px;
	line-height: 1.25;
	color: #000000;
	margin-top: 27px;
}
.note_info p{
	margin-bottom: 15px;
}
.note_info p:last-child{
	margin-bottom: 0;
}
.note_info a{
	    font-family: 'Proxima Nova Lt';
    font-weight: 600;
	position: relative;
	display: inline-block;
	color: #252c63;
}
.note_info a.hare-text{
	font-size: 20px;
	font-weight: bold;
    font-family: 'Proxima Nova Rg';
}
.note_info a:after{
	display: block;
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background:#252c63; 
	    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.no-touch .note_info a:hover{
	color: #e46c23;
}
.no-touch .note_info a:hover:after{
	width: 0;
}
.school-account .accodion-title{
	    position: relative;
    font-size: 20px;
    line-height: 1;
    font-weight: bold;
    font-family: 'Proxima Nova Rg';
    display: block;
    padding: 25px 37px;
	padding-right: 60px;
	color: #252b64;
}
.no-touch .school-account .accodion-title:hover{
	color: #252b64;
}
.plan-detail-box.school-account{
	border: solid 1px #e2e2e2;
	background: #f5f5f3;
}
.plan-detail-box.school-account .plan-detail-info{
	border: 0;
	display: none;
}
.plan-detail-main .plan-detail-box + .plan-detail-box{
	margin-top: 28px;
}
.school-account-box table.school-data{
	width: 100%;
}
.school-account-box table.school-data tr th{
	width: 33.33%;
	font-size: 20px;
	line-height: 1;
	color: #252c63;
	font-weight: bold;
    font-family: 'Proxima Nova Rg';
	padding: 23px 20px 25px;
}
.school-account-box table.school-data tr td{
	text-align: left;
	width: 33.33%;
	padding: 26px 20px 25px;
}
.school-account-box table.school-data tr th{
	padding: 26px 20px 25px;
}
.body-wrap.school-account-box table tr + tr{
	background: none;
	border-top: solid 2px #dcdcdc;
}
.school-account-box table.school-data thead tr th{
	border-top:solid 2px #dcdcdc;
	border-bottom:solid 2px #dcdcdc; 
}
.school-account-box table.school-data tr td:first-child,
.school-account-box table.school-data tr th:first-child{
	width: 40%;
	padding-left: 20px;
}
.body-wrap table tbody tr th span.title {
    margin-top: -100px;
    display: block;
}
a.accodion-title{
	display: block;
}
a.accodion-title .detail-title{
	margin: 0;
    line-height: 1;
    font-size: 40px;
	padding: 25px 75px 22px 37px;
	color: #252b64;
	border: solid 1px #e1e1e1;
	position: relative;
}
.plan-compare-box .plan-detail-info{
	border-top: solid 2px #888888;
}
.active a.accodion-title .detail-title{
	border-bottom: none;
}
a.accodion-title .detail-title:after,
.school-account .accodion-title:after{
	position: absolute;
	top: 0;
	right: 0;
	width: 75px;
	height: 100%;
	display: block;
	content: "";
	background: url(https://www.writestyler.com/public/front/images/plus-icon.svg) no-repeat center center;
	background-size: 23px;
}
a.accodion-title .detail-title:before,
.school-account .accodion-title:before{
	position: absolute;
	top: 0;
	right: 0;
	width: 75px;
	height: 100%;
	display: block;
	content: "";
	background: url(https://www.writestyler.com/public/front/images/minus.svg) no-repeat center center;
	background-size: 23px;
	opacity: 0;
	visibility: hidden;
}
.active a.accodion-title .detail-title:before,
.active.school-account .accodion-title:before{
	opacity: 1;
	visibility: visible;
}
.active a.accodion-title .detail-title:after,
.active.school-account .accodion-title:after{
	opacity: 0;
	visibility: hidden;
}
/*******/
/****** Testimonial ********/
.tesimonial-box-inner {
    position: relative;
}
.tesimonial-box-cont-wrap {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: table;
    width: 100%;
}
.tesimonial-box-img{
	text-align: right;
}
.tesimonial-box-img .image-box{
	display: inline-block;
}
.tesimonial-cont {
    display: table-cell;
    vertical-align: middle;
	text-align: left;
	padding: 30px 30px 30px 0;
}
.touch .tesimonial-cont { display: block; height: 100%; }
.tesimonial-cont-box{
	display: inline-block;
	vertical-align: top;
	background: #fff;
	min-height: calc(100% - 60px);
	padding-top: 56px;
	padding-left: 44px;
	padding-bottom: 96px;
	padding-right: 44px;
	position: relative;
	-webkit-box-shadow: -7px 15px 16px 0px rgba(50, 50, 50, 0.16);
-moz-box-shadow:    -7px 15px 16px 0px rgba(50, 50, 50, 0.16);
box-shadow:         -7px 15px 16px 0px rgba(50, 50, 50, 0.16);
}
.testimonial-text{
	color: #080808;
	font-size: 20px;
	line-height: 1.16;
	width: 100%;
	max-width: 245px;
}
.testimonial-text p{
	margin-bottom: 15px;
}
.testimonial-text p:last-child{
	margin-bottom: 0;
}
.testimonial-author h6.name{
	margin: 0;
	padding: 0;
	font-size: 24px;
	color: #080808;
	line-height: 1;
	font-family: 'Proxima Nova Lt';
	font-weight: 600;
}
.poition{
	line-height: 1;
	font-size: 16px;
	font-family: 'Proxima Nova Lt';
	font-weight: 600;
	color: #9a9a9a;
	display: block;
	margin-top: 8px;
}
.testimonial-author {
    position: absolute;
    bottom: 43px;
    left: 48px;
}
.tesimonial-box {
    width: 640px;
	padding-left: 20px;
	box-sizing: border-box;
}
.slider_wrap {
    padding-left: 17%;
	padding-top: 59px;
}
.owl-nav button:focus{
	outline: none;
}
.owl-nav button{
	font-size: 0;
	width: 24px;
	height: 20px;
	position: absolute;
	top: 50%;
	margin-top: -10px;
}
.owl-nav button span{
	display: none;
}
.owl-nav button:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	content: "";
	opacity: 0;
	visibility: hidden;
	    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
	background: url(https://www.writestyler.com/public/front/images/slider-arrow-hover.svg) no-repeat center center;
	background-size: 24px;
}
.owl-nav button:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	content: "";
	    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
	background: url(https://www.writestyler.com/public/front/images/slider-arrow.svg) no-repeat center center;
	background-size: 24px;
}
.no-touch .owl-nav button:hover:after{
	opacity: 1;
	visibility: visible;
}
.no-touch .owl-nav button:hover:before{
	opacity: 0;
	visibility: hidden;
}
.owl-nav button.owl-prev:after,
.owl-nav button.owl-prev:before{
	transform: rotate(180deg);
}
.owl-nav button.owl-prev{
	left: -40px;
}
.owl-nav button.owl-next{
	left: 660px;
}
.connect-content{
	font-size: 22px;
	line-height: 1.45;
	color: #363636;
	text-align: center;
	padding-top: 24px;
}
.connect-content p{
	margin-bottom: 15px;
}
.connect-content p:last-child{
	margin-bottom: 0;
}
.connect-content ul{
	margin: 20px 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.connect-content ul li{
	line-height: 1.2;
	margin: 0;
	position: relative;
}
.connect-content ul li:after{
	position: absolute;
	top: 7px;
	left: 0;
	width: 8px;
	height: 8px;
	background: #363636;
	border-radius: 50%;
	display: block;
	content: "";
}
.connect-content ol{
	margin: 20px 0;
}
.connect-content ol:first-child,
.connect-content ul:first-child{
	margin-top: 0;
}
.connect-content ol:last-child,
.connect-content ul:last-child{
	margin-bottom: 0;
}
.connect-button {
    margin-top: 15px;
}
/*******/
/***** Login Page ******/
.login-box-wrap{
	display: table;
	width: 100%;
}
.login-box-wrap > div{
	display: table-cell;
	vertical-align: middle;
}
.login-box-wrap > div.login-box{
	width: 40.7%;
}
.login-box-wrap > div.new-account-box{
	width: 59.3%;
}
.new-account-form{
	padding: 35px 30px 11px 80px;
	    -webkit-box-shadow: 2px 1px 9px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 2px 1px 9px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 1px 9px 0px rgb(0 0 0 / 10%);
	border-radius: 10px;
}
.form-box-wrap{
	margin: 0 -10px;
	font-size: 0;
}
.form-box-wrap > div{
	display: inline-block;
	vertical-align: top;
	padding: 0 10px;
	box-sizing: border-box;
	width: 50%;
	margin-bottom: 20px;
}
.form-title-box{
	margin-bottom: 26px;
}
.form-title-box h5{
	margin: 0;
	font-size: 20px;
	line-height: 1;
	font-family: 'Proxima Nova Lt';
	font-weight: 600;
}
.form-title-box p{
	line-height: 1.2;
	font-size: 16px;
	margin: 0;
	color: #363636;
	margin-top: 14px;
}
.choice{
	position: relative;
}
.choice input[type="radio"],
.choice input[type="checkbox"]{
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
}
.choice input[type="radio"] + label,
.choice input[type="checkbox"] + label{
	font-size: 15px;
	display: inline-block;
	color: #252b64;
	line-height: 1.2;
	position: relative;
	padding-left: 25px;
	cursor: pointer;
}

.choice input[type="radio"] + label { padding-top: 4px; font-size: 16px; padding-left: 35px; } 

.choice input[type="radio"] + label:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	display: block;
	content: "";
	border-radius: 50%;
	border: solid 2px #cdcdcd;
	box-sizing: border-box;
}
.choice input[type="radio"] + label:before{
    position: absolute;
    top: 5px;
    left: 5px;
    width: 16px;
    height: 16px;
    display: block;
    content: "";
    background: #252b64;
    border-radius: 50%;
    box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
}
.choice input[type="radio"]:checked + label:before{
	opacity: 1;
	visibility: visible;
}

.choice input[type="radio"]:checked + label:after{
	border-color: #252b64;
}
.choice input[type="checkbox"] + label:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	display: block;
	content: "";
	border: solid 1px #cdcdcd;
	box-sizing: border-box;
}
.choice input[type="checkbox"] + label:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	display: block;
	content: "";
	box-sizing: border-box;
	background: url(https://www.writestyler.com/public/front/images/checkmark.svg) no-repeat center center;
	background-size: 11px;
	opacity: 0;
	visibility: hidden;
}
.choice input[type="checkbox"]:checked + label:before{
	opacity: 1;
	visibility: visible;
}
.info-text{
	margin: 0;
	font-size: 16px;
	color: #ff0101;
}
.login-form{
	background: #f8f8f8;
	padding: 30px;
	position: relative;
    z-index: 2;
    margin-right: -30px;
	border-radius: 10px;
	    -webkit-box-shadow: 2px 1px 9px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 2px 1px 9px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 1px 9px 0px rgb(0 0 0 / 10%);
}
.login-form .form-box{
	margin-bottom: 20px;
}
.login-form .form-box input[type="email"],
.login-form .form-box input[type="password"]{
	background: none;
}
a.linktext {
    font-size: 16px;
    line-height: 1;
	display: inline-block;
	margin-top: 4px;
	color: #252b64;
}
.no-touch a.linktext:hover{
	color: #e46d23;
}
.login-form .form-box a.linktext{
	float: right;
}
/****/
/***** Forgot Password ******/
.forgotpass-box .login-form{
	margin-right: 0;
	width: 100%;
	box-sizing: border-box;
	max-width: 600px;
	margin: 0 auto;
}
/*****/
/***** School Account ******/
.school-account-form{
	    padding: 35px 30px 11px 30px;
    -webkit-box-shadow: 2px 1px 9px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 2px 1px 9px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 1px 9px 0px rgb(0 0 0 / 10%);
    border-radius: 10px;
}
section.school-account-form-sec{
	margin-top: 45px;
}
section.school-account-form-sec .form-box-wrap > div{
	padding: 0 12px;
	margin-bottom: 30px;
}
section.school-account-form-sec .form-box-wrap{
	margin: 0 -12px;
}
.g-cont-box{
	font-size: 20px;
	color: #363636;
	line-height: 1.4;
}
.g-cont-box p{
	margin-bottom: 15px;
}
.g-cont-box p:last-child{
	margin-bottom: 0;
}
.g-cont-box ul{
	text-align: left;
	margin: 20px 0;
	list-style: none;
	line-height: 1.3;
}
.g-cont-box ul li{
	margin: 0;
	padding-left: 20px;
	position: relative;
}
.g-cont-box ul li + li{
	margin-top: 10px;
}
.g-cont-box ul li:after{
	position: absolute;
	top: 7px;
	left: 0;
	width: 10px;
	height: 10px;
	display: block;
	content: "";
	background: #363636;
	border-radius: 50%;
}
.g-cont-box ul:first-child{
	margin-top: 0;
}
.g-cont-box ul:last-child{
	margin-bottom: 0;
}
section.page-inf-sec {
    margin-bottom: 45px;
}
.g-cont-box ol{
	margin: 20px 0;
	text-align: left;
}
.g-cont-box ol li{
	margin: 0;
	padding: 0;
	line-height: 1.3;
}
.g-cont-box ol li + li{
	margin-top: 10px;
}
.g-cont-box ol:first-child{
	margin-top: 0;
}
.g-cont-box ol:last-child{
	margin-bottom: 0;
}
span.has-error.error {
    margin-top: 2px;
    line-height: 1;
    padding: 3px 6px 4px;
    text-align: left;
    display: inline-block;
    font-size: 12px;
    background: #e02b27;
    color: #fff;
    position: relative;
    top: 100%;
    left: 0;
    width: auto;
}
.select2-container--default .select2-selection--single{
	border: solid 1px #c6ccdc !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 0 27px !important;
    height: 50px !important;
    font-size: 16px !important;
    color: #363636 !important;
    font-family: 'Proxima Nova Rg' !important;
    line-height: 1.42857143;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	padding-right: 45px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered{
	 line-height:50px !important;
    font-size: 16px !important;
    color: #363636 !important;
    font-family: 'Proxima Nova Rg' !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
	padding: 0 15px !important;
}
.select2-container--default .select2-results__option--selected{
	background: #252b64 !important;
	color: #fff !important;
}
.select2-selection__arrow{
	height: 50px !important;
	width: 40px !important;
	background: url(https://www.writestyler.com/public/front/images/select-arrow.svg) no-repeat left center !important;
	background-size: 18px !important;
}
.select2-container--open .select2-selection__arrow{
	height: 50px !important;
	width: 40px !important;
	background: url(https://www.writestyler.com/public/front/images/select-arrow.svg) no-repeat left center !important;
	background-size: 18px !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
	background-color: #252b64 !important;
    color: white !important;
}
.select2-results__option{
	font-size: 16px !important;
    color: #363636 !important;
    font-family: 'Proxima Nova Rg' !important;
	line-height: 1.2;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
	font-size: 14px;
	background-color: #252b64 !important; 
    border: 1px solid #252b64 !important;
	color: #fff !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
	border: solid 1px #c6ccdc !important;
	border-radius: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
	color: #fff !important;
}
.select2-container--default .select2-search--inline .select2-search__field{
	    height: 32px !important;
    margin: 0 !important;
    padding: 0 27px;
    margin-top: 12px !important;
}
.select2-container--default .select2-selection--multiple{
	border-radius: 0 !important;
	border: solid 1px #c6ccdc !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
	padding-left: 5px !important;
    padding-right: 6px !important;
    padding-top: 2px !important;
}
.no-touch .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, 
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{
	background-color: #252b64 !important; 
    border: 1px solid #252b64 !important;
	color: #fff !important;
}
.select2-container--default .select2-results>.select2-results__options{
	scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #252c63 rgba(255,255,255,.2);
}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar{
  width: 6px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
	border-radius: 4px;
}
 
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
  background-color:#252c63;
	border-radius: 4px;
  outline:none;
	height: 100px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
	cursor: pointer;
}
/*******/
/****** Login Page *****/
.login-box-main{
	min-height: 100vh;
	background: url(https://www.writestyler.com/public/front/images/login-background.jpg) no-repeat center center;
	background-size: cover;
	padding: 0 15px;
	box-sizing: border-box;
}
.login-box-main.forgotpass-bg{
	background: url(https://www.writestyler.com/public/front/images/Forgot-password.png) no-repeat center center;
	background-size: cover;
}
.login-box-main.newaccount-bg{
	background: url(https://www.writestyler.com/public/front/images/create-account.png) no-repeat center center;
	background-size: cover;
}
.login-box-main-inner{
	display: table;
	width: 100%;
	height: 100vh;
}
.login-box{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.login-box-inner{
	background: #fff;
	border-radius: 10px;
	width: 100%;
	max-width: 665px;
	box-sizing: border-box;
	margin: 20px auto;
	padding: 40px;
	text-align: left;
	-webkit-box-shadow: 2px 1px 9px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 2px 1px 9px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 1px 9px 0px rgb(0 0 0 / 10%);
} 
.login-box-info{
	margin-top: 53px;
	text-align: center;
}
.login-box-logo{
	text-align: center;
}
.login-box-info h1{
	line-height: 1;
	margin: 0 0 15px;
	font-size: 20px;
	font-family: 'Proxima Nova Lt';
    font-weight: 600;
}
.login-box-info p{
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
	color: #363636;
}
.form-box form{
	margin-top: 26px;
}
.form-box form > div{
	margin-bottom: 20px;
}
.form-box form > div:last-child{
	margin-bottom: 0;
}
.form-box form > div.forgot-link a{
	float: right;
	font-size: 16px;
	color: #252b64;
}
.no-touch .form-box form > div.forgot-link a:hover{
	color: #e9874b;
}
.form-box form > div p.account-text{
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
}
.form-box form > div p.account-text a{
	color: #e9874b;
	display: inline-block;
	font-family: 'Proxima Nova Lt';
    font-weight: 600;
}
.no-touch .form-box form > div p.account-text a:hover{
	color: #252b64;
}
.form-box form > div .btn{
	min-width: 178px;
	font-size: 18px;
}
.with-icon input{
	padding-right: 50px;
}
.form-box form > div input{
	padding: 0 20px;
    text-align: left;
}
.form-box form > div .select2-container--default .select2-selection--single{
	padding-left: 20px !important;
}
.form-box form > div.with-icon input{
	padding-right: 50px;
}
.form-box form > div.user-icon input{
	background-image: url(https://www.writestyler.com/public/front/images/user-icon.svg);
	background-repeat: no-repeat;
	background-position: calc(100% - 20px) center;
	background-size: 17px;
}
.form-box form > div.password-icon input{
	background-image: url(https://www.writestyler.com/public/front/images/pass-icon.svg); 
	background-repeat: no-repeat;
	background-position: calc(100% - 20px) center;
	background-size: 17px;
}
.login-box-inner.signup-box {
    max-width: 875px;
}
.form-box-wrap > div:last-child{
	margin-bottom: 0;
}
.form-box-wrap > div.full-width{
	width: 100%;
}

.radio-select { text-align: center; }
.radio-select > div.form-box-inner { width: 100%; display: block; margin: 0; }
div.form-box-inner label.radio-label { margin: 0 15px 5px 0; }
div.form-box-inner label.radio-label:last-child { margin: 0; }

.contact_form .alert-success { font-size: 18px; }
.form-box.school-enquiry-submit { text-align: right; width: 100%; }
/***** Responsive css Star{
t ******/
@media (max-width:1599px){
	.g-cont-box{
		font-size: 18px;
	}
	.g-cont-box ul li:after{
		width: 8px;
		height: 8px;
		top: 5px;
	}
	.g-cont-box ul li{
		padding-left: 15px;
	}
	.progress-img-section .progress-img-section-bg{
		margin: 0;
		width: 100%;
		background-size: contain;
	}
	.product-info-box > div + div .img-box img{
		width: 100%;
		height: auto;
		max-width: 100%;
	}
	h1, .h1 {
		font-size: 55px;
	}

	h2 {
		font-size: 45px;
	}

	h3 {
		font-size: 35px;
	}

	h4 {
		font-size: 25px;
	}

	h5 {
		font-size: 18px;
	}
	.mt1{
		margin-top: 10px;
	}
	.mt2{
		margin-top: 20px;
	}
	.mt3{
		margin-top: 20px;
	}
	.mt4{
		margin-top: 25px;
	}
	.mt5{
		margin-top: 30px;
	}
	.mt6{
		margin-top: 40px;
	}
	.mt7{
		margin-top: 50px;
	}
	.mt8{
		margin-top: 60px;
	}
	.section-info{
		font-size: 20px;
	}
	ul.product-box-list > li{
		padding: 0 20px;
	}
	ul.product-box-list{
		margin: 10px -20px 0;
	}
	.section-box.product-info-sec {
		padding: 60px 0 0;
	}
	.tool-section h2.section-title{
		margin-bottom: 40px;
	}
	.classroom-info-sec{
		font-size: 20px;
	}
	.classroom-info-text {
		margin-top: 15px;
	}
	.product_information{
		font-size: 18px;
	}
	/**** FAQ *****/
	section.page-title {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.faq-box{
		padding: 0 60px;
	}
	.faq-item{
		padding: 30px 0 30px 0;
	}
	footer {
		margin-top: 60px;
	}
	.inner-banner-img{
		/*height: 380px;*/
	}
	.breadcrumbs ul li{
		font-size: 20px;
	}
	.breadcrumbs ul li:after{
		font-size: 20px;
	}
	.breadcrumbs ul li{
		padding: 0 25px;
	}
	/****** Contact *****/
	.contact_box_cont{
		font-size: 17px;
	}
	.phone_box, .email_box{
		font-size: 17px;
	}
	.contact-box-wrap > div.contact-information-box {
		width: 350px;
		padding-right: 45px;
	}
	.contact-box-wrap > div.contact-form-box {
		width: calc(100% - 350px);
		padding: 20px 20px 30px;
	}
	.contact_inq_form > div.form-title h4{
		margin-bottom: 15px;
	}
	input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type="datetime"], input[type="email"]{
		height: 45px;
		padding: 0 20px;
		font-size: 15px;
	}
	.select2-container .select2-selection--single .select2-selection__rendered{
		line-height: 45px !important;
		font-size: 15px !important;
	}
	.select2-container--default .select2-selection--single{
		height: 45px !important;
		padding-left: 20px !important;
	}
	.select2-selection__arrow {
		height: 45px !important;
		width: 35px !important;
	}
	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
		font-size: 15px;
	}
	::-moz-placeholder { /* Firefox 19+ */
		font-size: 15px;
	}
	:-ms-input-placeholder { /* IE 10+ */
		font-size: 15px;
	}
	:-moz-placeholder { /* Firefox 18- */
		font-size: 15px;
	}
	.field-box{
		margin-bottom: 25px;
	}
	select{
		height: 45px;
		font-size: 15px;
		padding-left: 20px;
	}
	.contact_inq_form > div.form-title h4{
		font-size: 18px;
	}
	/***** About page ******/
	.slider_wrap{
		padding-left: 90px;
		padding-top: 40px;
	}
	.aboutcont_box{
		font-size: 20px;
		line-height: 1.6;
		margin-top: 20px;
	}
	.about-cont p.tag-line{
		font-size: 22px;
		line-height: 1.3;
	}
	.connect-content{
		font-size: 20px;
		padding-top: 15px;
	}
	.testimonial-text{
		font-size: 18px;
	}
	.testimonial-author h6.name{
		font-size: 22px;
	}
	.tesimonial-cont-box{
		padding-top: 46px;
		padding-left: 34px;
		padding-bottom: 86px;
		padding-right: 34px;
	}
	.tesimonial-box{
		width: 620px;
	}
	.owl-nav button.owl-next {
		left: 630px;
	}
	/******/
	/***** Pricing page ******/
	.plan-price-inner span{
		font-size: 35px;
	}
	.basic-plan .plan-price-inner span{
		font-size: 50px;
	}
	.user-plan-oprion-text{
		font-size: 18px;
	}
	.student-info + .teachers-info {
		margin-top: 35px;
	}
	a.accodion-title .detail-title{
		font-size: 35px;
		padding: 20px 75px 17px 33px;
	}
	.body-title{
		font-size: 25px;
	}
	.body-wrap table tbody tr th{
		padding: 29px 15px 25px;
	}
	.body-wrap table tbody tr th{
		font-size: 18px;
	}
	.body-wrap table tbody tr th span.title{
		margin-top: -90px;
	}
	.body-wrap table tbody tr td{
		font-size: 16px;
		padding: 21px 15px 20px;
	}
	.subscription-button-inner h5.plan-name{
		font-size: 20px;
	}
	.subscription-button-inner h5.plan-name:after{
		width: 64px;
	}
	.subscription-button-box{
		padding: 33px 0 35px;
	}
	.body-wrap {
		padding: 0 33px;
	}
	.note_info{
		margin-top: 17px;
		font-size: 17px;
	}
	/*****/
	/**** Login page ******/
	.login-box-inner{
		padding: 30px;
	}
	.login-box-info{
		margin-top: 45px;
	}
}
@media (max-width:1365px){
	h1, .h1 {
		font-size: 50px;
	}

	h2 {
		font-size: 40px;
	}

	h3 {
		font-size: 30px;
	}

	h4 {
		font-size: 22px;
	}

	h5 {
		font-size: 16px;
	}
	.mt1{
		margin-top: 10px;
	}
	.mt2{
		margin-top: 15px;
	}
	.mt3{
		margin-top: 20px;
	}
	.mt4{
		margin-top: 20px;
	}
	.mt5{
		margin-top: 25px;
	}
	.mt6{
		margin-top: 35px;
	}
	.mt7{
		margin-top: 45px;
	}
	.mt8{
		margin-top: 50px;
	}
	.product-info-box > div{
		width: 50%;
	}
	.product-info-box > div:first-child{
		min-width: inherit;
	}
	.product-info-box > div img{
		width: 100%;
		height: auto;
		max-width: 100%;
	}
	.tab-row > div.left-tool-box{
		width: 500px;
	}
	.tab-box .img-box{
		padding-left: 50px;
		width: calc(100% - 500px);
	}
	.tab-row > div.left-tool-box{
		padding-top: 20px;
	}
	.tool-title-box > span.tool-time{
		font-size: 20px;
	}
	.tool-box-info{
		font-size: 16px;
	}
	.tool-title-box > span.tool-icon-box{
		width: 58px;
		height: 58px;
	}
	.tool-box-info{
		padding-left: 92px;
	}
	.tab-box .nav-link{
		padding: 15px;
	}
	.tool-section h2.section-title{
		margin-bottom: 30px;
	}
	.img-box-box-img img{
		max-width: 90%;
	}
	.btn.x-long {
		padding: 11px 25px 11px;
	}
	.section-box {
		padding: 37px 0;
	}
	.progress-img-section{
		margin-top: 40px;
	}
	.progress-img-box-info{
		margin-top: 20px;
		font-size: 16px;
	}
	.progress-img-box-info .progress-img-title{
		margin-bottom: 10px;
		font-size: 20px;
	}
	.progress-img-box-thumb img{
		width: 100%;
		height: auto;
		max-width: 100%;
	}
	.progress-img-box-wrap{
		padding: 0 40px;
	}
	.top-footer{
		padding: 30px 0;
	}
	.bottom-footer{
		padding-top: 35px;
    	padding-bottom: 35px;
	}
	/*****/
	ul.product-box-list > li{
		padding: 0 15px;
		margin-top: 85px;
	}
	ul.product-box-list{
		margin: 10px -15px 0;
	}
	.grey-bg{
		padding: 40px 0;
	}
	.pro-box-icon{
		width: 86px;
		height: 86px;
		top: -43px;
		margin-left: -43px;
	}
	.product-box .pro-box{
		padding: 67px 15px 21px;
	}
	.product-info{
		font-size: 14px;
	}
	.product-title{
		font-size: 18px;
	}
	.section-info {
		font-size: 18px;
	}
	.style-box ul li{
		padding: 0 10px;
	}
	.style-box ul{
		margin: 0 -10px;
		margin-top: 15px;
	}
	/*.banner-box-wrap > div.media-box .shap-box,*/
        .left-sharp{
		width: 475px;
    	height: 458px;
	}
	.banner-box-wrap > div.media-box{
		width: 475px;
	}
	.banner-box-wrap > div.text-box{
		padding-right: 60px;
		width: calc(100% - 475px);
	}
	.home-media-box:after, .left-sharp:after{
		background-size: 100%;
		top: -20px;
	}
	.banner-info-text{
		font-size: 20px;
	}
	.product-icon .svg-icon svg{
		width: 80% !important;
		height: auto !important
	}
	/***** FAQ Page ******/
	.inner-banner-img {
		/*height: 320px;*/
	}
	.faq-box {
		padding: 0 50px;
	}
	footer {
		margin-top: 50px;
	}
	/***** About page ******/
	.right-shap-big {
		width: 500px;
		height: 449px;
	}
	.right-shap-big .shap-box {
		height: 450px;
	}
	.about-box-wrap > div.about-left{
		width: 500px;
	}
	.about-box-wrap > div.about-right {
		width: calc(100% - 500px);
		padding-left: 60px;
	}
	.right-big-sharp-wrap:after{
		left: 0px;
    	background-size: contain;
	}
	.about-cont p.tag-line{
		font-size: 20px;
	}
	.aboutcont_box{
		font-size: 18px;
	}
	.slider_wrap {
		padding-left: 60px;
		padding-top: 20px;
	}
	.tesimonial-box {
		width: 607px;
	}
	.connect-content{
		font-size: 18px;
	}
	/******/
	/****** Pricing Page *******/
	.plan-info{
		padding: 0 25px 170px;
	}
	.user-plan-oprion-text {
		font-size: 16px;
	}
	.user-plan-oprion-text ul{
		margin-top: 20px;
		font-size: 14px;
	}
	h6.box-info-title{
		font-size: 17px;
	}
	.plan-button .btn{
		font-size: 17px;
	}
	.more-link a{
		font-size: 15px;
	}
	.more-link{
		margin-top: 16px;
	}
	.plan-button{
		padding: 0 25px;
		bottom: 24px;
	}
	.plan-price-inner span {
		font-size: 30px;
	}
	.plan-price{
		height: 145px;
	}
	.basic-plan .plan-price-inner span {
		font-size: 46px;
	}
	a.accodion-title .detail-title {
		font-size: 30px;
		padding: 17px 75px 15px 23px;
	}
	.body-wrap table tbody tr th span.title {
		margin-top: -73px;
	}
	.body-title {
		font-size: 20px;
	}
	.body-wrap table tbody tr th {
		padding: 23px 15px 20px;
	}
	.body-wrap {
		padding: 0 25px;
	}
	.subscription-button-inner .btn{
		font-size: 17px;
	}
	.note_info {
		margin-top: 15px;
		font-size: 15px;
	}
	.body-wrap.teachers-box table tbody tr th {
		padding: 31px 15px 17px;
	}
	.body-wrap table tbody tr td{
		font-size: 14px;
	}
	.body-wrap.teachers-box table tbody tr td {
		padding: 18px 15px 17px;
	}
	.body-wrap table tbody tr td.option-name{
		font-size: 14px;
		width: 110px;
	}
	.subscription-button-inner .btn {
		font-size: 15px;
	}
	.note_info a.hare-text{
		font-size: 17px;
	}
	.subscription-button-box {
		padding: 25px 0 30px;
	}
	.student-info {
		min-height: 370px;
	}
	.student-info + .teachers-info {
		margin-top: 25px;
	}
	.school-account .accodion-title{
		font-size: 18px;
		padding: 20px 28px;
	}
	.school-account-box table.school-data tr th {
		padding: 20px 15px 20px;
		font-size: 18px;
	}
	.school-account-box table.school-data tr td{
		padding: 20px 20px 19px;
	} 
	.school-account-box table.school-data tr td:first-child, .school-account-box table.school-data tr th:first-child{
		padding-left: 15px;
	}
}
@media (max-width:1199px){
    .owl-nav button.owl-next {
		left: 610px;
	}
	.g-cont-box{
		font-size: 16px;
	}
	.g-cont-box ul li:after{
		width: 8px;
		height: 8px;
		top: 5px;
	}
	.g-cont-box ul li{
		padding-left: 15px;
	}
	section.page-inf-sec{
		margin-bottom: 30px;
	}
	h1, .h1 {
		font-size: 40px;
	}

	h2 {
		font-size: 35px;
	}

	h3 {
		font-size: 26px;
	}

	h4 {
		font-size: 20px;
	}

	h5 {
		font-size: 16px;
	}
	.mt1{
		margin-top: 10px;
	}
	.mt2{
		margin-top: 10px;
	}
	.mt3{
		margin-top: 15px;
	}
	.mt4{
		margin-top: 15px;
	}
	.mt5{
		margin-top: 20px;
	}
	.mt6{
		margin-top: 30px;
	}
	.mt7{
		margin-top: 35px;
	}
	.mt8{
		margin-top: 40px;
	}
	.section-box {
		padding: 27px 0;
	}
	/*.banner-box-wrap > div.media-box .shap-box,*/
        .left-sharp{
		width:430px;
		height: 415px;
	}
	.banner-box-wrap > div.media-box{
		width: 430px;
	}
	.banner-box-wrap > div.text-box{
		width: calc(100% - 430px);
		padding-right: 30px;
	}
	.style-box .style-section-title{
		font-size: 20px;
	}
	.style-box{
		margin-top: 20px;
	}
	ul.product-box-list > li{
		margin-top: 65px;
		padding: 0 10px;
	}
	ul.product-box-list{
		margin: 20px -10px 0;
	}
	.section-info {
		font-size: 16px;
	}
	.product_information {
		font-size: 16px;
	}
	.product_title{
		margin-bottom: 15px;
	}
	.product-info-box + .product-info-box{
		margin-top: 30px;
	}
	.tab-row > div.left-tool-box{
		width: 430px;
	}
	.tool-title-box > span.tool-time{
		font-size: 18px;
	}
	.tool-title-box > span.tool-time{
		padding-left: 22px;
	}
	.tool-box-info{
		padding-left: 82px;
	}
	.left-tool-box .section-button{
		padding-left: 100px;
	}
	.tab-box .img-box {
		padding-left: 30px;
		width: calc(100% - 430px);
	}
	.img-box-box-img img{
		max-width: 100%;
	}
	.classroom-info > div.classsroom-video{
		width: 460px;
	}
	.classroom-info > div.classroom-info-sec{
		width: calc(100% - 460px);
	}
	.classroom-info-sec {
		font-size: 17px;
	}	
	.progress-img-box-thumb img{
		max-width: 85%;
	}
	.footer-box-wrap > div:nth-child(1) {
		width: 20.2%;
	}
	.footer-box-wrap > div:nth-child(2) {
		width: 20.6%;
	}
	.footer-box-wrap > div:nth-child(3) {
		width: 20.8%;
	}
	/***** FAQ Page ******/
	.inner-banner-img {
		/*height: 300px;*/
	}
	.breadcrumbs ul li {
		font-size: 18px;
		padding: 0 20px;
	}
	.breadcrumbs ul li:after{
		font-size: 18px;
	}
	section.page-title {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.faq-box {
		padding: 0 40px;
	}
	.faq-item h4.faq-title{
		font-size: 20px;
	}
	.faq-item {
		padding: 20px 0;
	}
	.ans{
		font-size: 16px;
		padding-right: 70px;
		margin-top: 10px;
	}
	.faq-item h4.faq-title{
		padding-right: 70px;
	}
	/***** About page *******/
	.right-shap-big {
		width: 450px;
		height: 404px;
	}
	.right-shap-big .shap-box {
		height: 404px;
	}
	.about-box-wrap > div.about-right {
		width: calc(100% - 450px);
		padding-left: 30px;
	}
	.about-box-wrap > div.about-left{
		width: 450px;
	}
	.tesimonial-cont-box {
		padding-top: 36px;
		padding-left: 24px;
		padding-bottom: 66px;
		padding-right: 14px;
	}
	.testimonial-text {
		font-size: 16px;
	}
	.testimonial-author h6.name {
		font-size: 19px;
	}
	.poition{
		font-size: 14px;
	}
	.testimonial-author {
		bottom: 27px;
		left: 25px;
	}
	.tesimonial-box {
		width: 580px;
	}
	.connect-content{
		padding-top: 0;
		font-size: 16px;
	}
	/*******/
	.subscription-button-inner .btn{
		font-size: 15px;
	}
	.subscription-button-inner h5.plan-name {
		font-size: 18px;
	}
	a.accodion-title .detail-title{
		font-size: 24px;
	}
	.body-wrap table tbody tr th {
		padding: 18px 15px 16px;
	}
	.body-wrap table tbody tr td{
		padding: 16px 10px 16px;
	}
	.body-wrap table tbody tr th {
		font-size: 16px;
	}
	.body-wrap table tbody tr th span.title {
		margin-top: -65px;
	}
	.plan-button .btn {
		font-size: 15px;
	}
	.plan-info {
		padding: 0 20px 150px;
	}
	.plan-button {
		padding: 0 20px;
		bottom: 14px;
	}
	.student-info {
		min-height: 405px;
	}
	.plan-price-inner span {
		font-size: 24px;
	}
	.plan-price-inner span.user-info{
		font-size: 15px;
	}
	.basic-plan .plan-price-inner span {
		font-size: 40px;
	}
	.plan-price{
		min-height: 130px;
	}
	.plan-title{
		font-size: 16px;
	}
	.user-plan-oprion-text {
		font-size: 14px;
	}
	.page-tagline{
		font-size: 20px;
	}

}
@media (max-width:991px){
    .header-right-inner .header-button .btn { position: relative; top: -2px; padding:8px 10px 7px; }
    .header-inner > div.header-left { width: auto; }
	body {
		padding-top: 85px;
	}
	h1, .h1 {
		font-size: 35px;
	}

	h2 {
		font-size: 30px;
	}

	h3 {
		font-size: 22px;
	}

	h4 {
		font-size: 18px;
	}

	h5 {
		font-size: 15px;
	}
	
	.mt5{
		margin-top: 20px;
	}
	.mt6{
		margin-top: 22px;
	}
	.mt7{
		margin-top: 25px;
	}
	.mt8{
		margin-top: 30px;
	}
	.section-box{
		padding: 20px 0;
	}
	.banner-box-wrap > div{
		display: block;
	}
	.banner-box-wrap{
		display: flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
	}
	.banner-box-wrap > div.text-box{
		padding-right: 0;
		width: 100%;
		order: 2;
		-webkit-order: 2;
		-o-order: 2;
	}
	.banner-box-wrap > div.media-box{
		margin: 0 auto;
		text-align: center;
		order: 1;
		-webkit-order: 1;
		-o-order: 1;
	}
	ul.product-box-list > li{
		width: 33.33%;
	}
	.product_information {
		font-size: 14px;
	}
	.product_information + .product_button-sec{
		margin-top: 20px;
	}
	.classroom-info > div.classsroom-video{
		width: 400px;
		padding-left: 20px;
	}
	.classroom-info > div.classroom-info-sec{
		width: calc(100% - 400px);
	}
	.tool-title-box > span.tool-time {
		padding-left: 15px;
	}
	.tool-box-info {
			padding-left: 74px;
		}
	.tab-row > div.left-tool-box {
		width: 350px;
	}
	.tab-box .img-box {
		padding-left: 20px;
		width: calc(100% - 350px);
	}
	.left-tool-box .section-button {
		padding-left: 90px;
	}
	.contact-box{
		font-size: 14px;
	}
	.footer-logo a img{
		max-width: 200px;
		height: auto;
	}
	.social-section ul{
		margin: 0 -5px;
	}
	.footer-box-contain ul li + li {
		margin-top: 10px;
	}
	.footer-box-contain ul li a{
		font-size: 15px;
	}
	.footer-box-contain{
		margin-top: 20px;
	}
	.footer-box-contain{
		font-size: 15px;
	}
	.bottom-footer {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.social-section ul li{
		padding: 0 5px;
	}
	.product-info-box > div + div .img-box {
		padding-left: 20px;
	}
	.product-info-box > div + div{
		padding-left: 25px;
	}
	.btn{
		font-size: 15px;
		padding: 8px 15px 7px;
	}
	.navigation ul li{
		margin-right: 10px;
	}
	.header-right-inner > div + div { padding-left:10px; }
	.navigation ul li:last-child{
		margin-right: 0;
	}
	.logo > span.logo-text img{
		max-width: 136px;
	}
	.logo > span.logo-icon img{
		max-width: 44px;
	}
	.sticky .logo > span.logo-text img {
		max-width: 100px;
	}
	.progress-img-box-wrap > div{
		padding: 0 8px;
	}
	.progress-img-box-wrap{
		padding: 0 30px;
		margin: 0 -8px;
	}
	.progress-img-text{
		padding: 0 5px;
	}
	.progress-img-box-info .progress-img-title{
		font-size: 18px;
	}
	.progress-img-box-info{
		font-size: 14px;
	}
	.footer-box-wrap > div{
		display: inline-block;
		vertical-align: top;
	}
	.footer-box-wrap > div:nth-child(3),
	.footer-box-wrap > div:nth-child(2),
	.footer-box-wrap > div:nth-child(1){
		width: 33.33%;
	}
	.footer-box-wrap > div:nth-child(4){
		width: 100%;
		margin-top: 30px;
	}
	.newsletter form input{
		height: 43px;
	}
	.footer-box-contain .newsletter{
		margin-top: 10px;
	}
	.tool-section h2.section-title{
		margin-bottom: 15px;
	}
	/***** FAQ Page *****/
	.faq-box {
		padding: 0 30px;
	}
	.faq-item h4.faq-title{
		font-size: 18px;
	}
	.faq-item h4.faq-title:after{
		width: 47px;
	}
	.inner-banner-img {
		/*height: 230px;*/
	}
	footer {
		margin-top: 40px;
	}
	/******/
	/****** Contact Page ******/
	.contact-box-wrap > div.contact-information-box{
		width: 100%;
		padding-right: 0;
	}
	.contact-box-wrap > div{
		display: block;
	}
	.contact-box-wrap > div + div{
		margin-top: 30px;
	}
	.contact-box-wrap > div.contact-form-box{
		width: 100%;
	}
	.field-box{
		padding: 0 10px;
		margin-bottom: 20px;
	}
	.contact_inq_form{
		margin: 0 -10px;
	}
	input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type="datetime"], input[type="email"]{
		height: 40px;
		font-size: 14px;
		padding: 0 15px;
	}
	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
		font-size: 14px;
	}
	::-moz-placeholder { /* Firefox 19+ */
		font-size: 14px;
	}
	:-ms-input-placeholder { /* IE 10+ */
		font-size: 14px;
	}
	:-moz-placeholder { /* Firefox 18- */
		font-size: 14px;
	}
	textarea{
		padding: 15px;
		font-size: 14px;
	}
	select{
		height: 40px;
		font-size: 14px;
		padding-left: 15px;
		padding-right: 35px;
		background-position: calc(100% - 16px) center;
    	background-size: 14px;
	}
	/***** About ******/
	.right-shap-big {
		width: 360px;
		height: 323px;
	}
	.button-right .popup-button{
		right: 32px;
	}
	.about-box-wrap > div.about-left {
		width: 360px;
	}
	.right-shap-big .shap-box {
		height: 323px;
	}
	.about-box-wrap > div.about-right {
		width: calc(100% - 360px);
		padding-left: 20px;
	}
	.aboutcont_box {
		font-size: 16px;
		margin-top: 15px;
	}
	.about-cont p.tag-line {
		font-size: 18px;
	}
	.tesimonial-cont-box {
		padding-top: 26px;
		padding-left: 14px;
		padding-bottom: 56px;
		padding-right: 18px;
	}
	.testimonial-author h6.name {
		font-size: 18px;
	}
	.testimonial-author {
		bottom: 20px;
		left: 16px;
	}
	.tesimonial-box {
		width: 530px;
	}
	.owl-nav button.owl-next {
		left: 557px;
	}
	/*****/
	/**** Login page *****/
	.login-box-wrap{
		display: block;
		margin-top: 20px;
	}
	.form-title-box{
		margin-bottom: 18px;
	}
	.login-box-wrap > div{
		display: block;
	}
	.login-box-wrap > div + div{
		margin-top: 30px;
	}
	.login-box-wrap > div.login-box{
		width: 100%;
	}
	.login-form{
		margin-right: 0;
	}
	.login-box-wrap > div.new-account-box{
		width: 100%;
	}
	.new-account-form{
		padding: 25px 20px 11px 25px; 
	}
	.info-text{
		font-size: 14px;
	}
	.form-title-box h5{
		font-size: 18px;
	}
	.form-title-box p{
		font-size: 14px;
		margin-top: 10px;
	}
	/*******/
	.plan-box-wrap > div{
		width: 50%;
		margin-bottom: 30px;
	}
	.plan-box-wrap > div:last-child{
		margin-bottom: 0;
	}
	.student-info {
		min-height: inherit;
	}
	.plan-price-inner span {
		font-size: 22px;
	}
	.basic-plan .plan-price-inner span {
		font-size: 35px;
	}
	.plan-price {
		min-height: 70px;
		height: 120px;
	}
	.subscription-button-box{
		padding: 15px 0 20px;
	}
	.subscription-button-box{
		margin: 0 -20px;
	}
	.body-wrap {
		padding: 0 15px;
	}
	a.accodion-title .detail-title{
		padding: 17px 75px 15px 15px;
	}
	.body-wrap.teachers-box table tbody tr td {
		padding: 14px 10px 14px;
	}
	a.accodion-title .detail-title:before, .school-account .accodion-title:before{
		width: 45px;
	}
	section.plan-detail-sec{
		padding-top: 30px;
	}
	.subscription-button-box > div{
		padding: 0 20px;
	}
	.body-wrap table tbody tr td.option-name{
		max-width: 90px;
	}
	.school-account-box table.school-data tr th {
		padding: 15px 10px 15px;
		font-size: 16px;
	}
	.school-account-box table.school-data tr td {
		padding: 15px 11px 14px;
		width: inherit;
	}
	a.accodion-title .detail-title:after, .school-account .accodion-title:after{
		width: 45px;
	}
	.school-account .accodion-title {
		font-size: 18px;
		padding: 17px 19px;
	}
	.school-account-box table.school-data tr td:first-child, .school-account-box table.school-data tr th:first-child{
		padding-left: 10px;
	}
	.select2-container .select2-selection--single .select2-selection__rendered {
		line-height: 40px !important;
		font-size: 14px !important;
	}
	.select2-container--default .select2-selection--single {
		height: 40px !important;
		padding-left: 15px !important;
	}
	.select2-selection__arrow {
		height: 40px !important;
		width: 30px !important;
	}
	section.school-account-form-sec .form-box-wrap > div{
		margin-bottom: 20px;
	}
	.school-account-form {
		padding: 25px 20px 5px 20px;
	}
	.login-box-inner{
		padding: 20px;
	}
	.login-box-info{
		margin-top: 30px;
	}
	.form-box form > div .btn {
    	min-width: 158px;
		font-size: 16px;
	}
	.login-box-logo img{
		max-width: 200px;
		height: auto;
	}
}
@media (min-width:768px) and (max-width:991px) {
.navigation ul li a,
.sticky .navigation ul li a { font-size:14px; padding:28px 0; }
}
@media (min-width:768px){
	.mobile-button{
		display: none;
	}
	.mobile-menu-icon{
		display: none !important;
	}
	.mobile-show{
		display: none !important;
	}
}
@media (max-width:767px){
	.g-cont-box{
		font-size: 14px;
	}
	.g-cont-box ul li:after{
		width: 8px;
		height: 8px;
		top: 5px;
	}
	.g-cont-box ul li{
		padding-left: 15px;
	}
	section.page-inf-sec{
		margin-bottom: 20px;
	}
	.form-title-box h5 {
		font-size: 16px;
	}
	.school-account-form{
		padding: 20px 20px 10px;
	}
	.style-box{
		max-width: 390px;
		width: 100%;
		margin: 0 auto;
		margin-top: 60px;	
	}
	.mobile-hidden{
		display: none !important;
	}
	body {
		padding-top: 82px;
	}
	section.home-banner.section-box {
		padding: 65px 0;
	}
	.mobile-menu-icon a{
		display: inline-block;
		width: 40px;
		height: 40px;
		background: #252b64 url(https://www.writestyler.com/public/front/images/menu-icon.svg) no-repeat center center;
		background-size: 20px;
		border-radius: 5px;
	}
	header { padding: 14px 0; }
	.header-right-inner > div.header-button{
		display: none !important;
	}
	.header-right-inner > div.navigation{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 0;
		height: 0;
		opacity: 0;
		visibility: hidden;
		background: #252b64;
		transform: scale(.07);
    	transform-origin: 100% 100% 0;
    	-webkit-transform: scale(.07);
    	-webkit-transform-origin: 100% 100% 0;
    	transition: all .5s ease-out 0s;
		display: table;
	}
	.navigation nav{
		display: table-cell;
		vertical-align: middle;
		padding-top: 40px;
	}
	body.menu-active .header-right-inner > div.navigation{
		width: 100%;
		height: 100%;
		opacity: 1;
		visibility: visible;
		transform: scale(1);
		-webkit-transform: scale(1);
	}
	.mobile-button{
		margin-top: 30px; 
	}
	.navigation ul{
		margin: 0 auto;
		width: 100%;
		max-width: 400px;
		padding: 0 20px;
		box-sizing: border-box;
		max-height: calc(100vh - 150px);
    	overflow: hidden;
    	overflow-y: auto;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: #fff rgba(255,255,255,.2);
	}
	.navigation ul li ul {
		max-height: none;
		max-width: none;
		padding: 0;
	}
	.navigation ul::-webkit-scrollbar {
	  width: 6px;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
		border-radius: 4px;
	}
	.navigation ul::-webkit-scrollbar-track {
	  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	.navigation ul::-webkit-scrollbar-thumb {
	  background-color:#fff;
		border-radius: 4px;
	  outline:none;
		height: 100px;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
		cursor: pointer;
	}
	.navigation ul li {
		display: block;
		margin: 20px 0 0;
		text-align: center;
	}
	.navigation ul li:first-child { margin-top:0; }
	.navigation ul li ul li:first-child { margin-top:20px; }
	.navigation ul li ul li a { font-size:16px; }
	.navigation ul li.active a{
		color: #e46d23;
	}
	.navigation ul li.active ul li a {
		color: #ffffff;
	}
	.navigation ul li ul li.active a {
		color: #e46d23;
	}
	.navigation ul li a{
		display: inline-block;
		font-size: 30px;
		font-family: 'Proxima Nova Th';
		color: #fff;
		padding:0 !important;
	}
	.navigation ul li a:before{
		display: none;
	}
    .navigation ul li.create-account-mobile { display: block; }
	span.menu_close {
		position: absolute;
		top: 20px;
		right: 15px;
		width: 40px;
		height: 40px;
	}
	span.menu_close:after{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		content: "";
		background: url(https://www.writestyler.com/public/front/images/menu_close.svg) no-repeat center center;
		background-size: 22px;
	}
	.menu_logo{
		position: absolute;
		top: 15px;
		left: 15px;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: #fff;
	}
	.menu_logo:after{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		content: "";
		background: url(../images/logo_icon.png) no-repeat center center;
		background-size: 38px;
	}
	.video-popup .popup-video-box .video-wrap{
		height: calc(100vh - 130px);
	}
	h1, .h1 {
		font-size: 30px;
	}

	h2 {
		font-size: 30px;
	}

	h3 {
		font-size: 22px;
	}

	h4 {
		font-size: 18px;
	}

	h5 {
		font-size: 15px;
	}
	
	.mt5{
		margin-top: 15px;
	}
	.mt6{
		margin-top: 15px;
	}
	.mt7{
		margin-top: 20px;
	}
	.mt8{
		margin-top: 20px;
	}
	.banner-box-wrap > div.text-box {
		padding-right: 0;
		width: 100%;
		order: 1;
		-webkit-order: 1;
		-o-order: 1;
		padding-top: 0;
		max-width: 390px;
    	margin: 0 auto;
	}
	.line:after{
		display: none;
	}
	.banner-box-wrap > div.media-box {
		margin: 30px auto 0;
		text-align: center;
		order: 2;
		-webkit-order: 2;
		-o-order: 2;
	}
	.style_box .style-box-text{
		font-size: 17px;
		margin-top: 10px;
	}
	.style-box .style-section-title {
		font-size: 18px;
		text-align: center;
	}
	.style_box .style-box-icon{
		height: 47px;
	}
	.style_box{
		padding: 15px;
	}
	.banner-cont-box{
		text-align: center;
	}
	.banner-info-text{
		margin: 0 auto;
		display: block;
		font-size: 16px;
		margin-top: 18px;
	}
	.popup-button a svg{
		width: 57px !important;
		height: 57px !important;
	}
	/*.banner-box-wrap > div.media-box .shap-box,*/
        .left-sharp {
		width: 430px;
		height: 386px;
	}
	.popup-button{
		left: 102px;
	}
	.grey-bg-design:before{
		background-size: 250%;
		height: 20px;
	}
	.grey-bg {
		padding: 50px 0;
	}
	.section-info{
		line-height: 1.2;
	}
	h2.section-title{
		margin-bottom: 18px;
	}
	.product-title{
		font-size: 16px;
		margin-bottom: 9px;
	}
	.product-info{
		font-size: 13px; 
	}
	.product-box .pro-box {
		padding: 72px 15px 21px;
		min-height: 213px;
	}
	ul.product-box-list > li{
		padding: 0;
		width: 100%;
	}
	ul.product-box-list{
		margin: 0;
		margin-top: 40px;
	}
	li.product-box {
		padding-top: 50px;
		box-sizing: border-box;
		position: relative;
		height: 100%;
	}
	.product-box-list .owl-stage{
		display: flex;
	}
	.product-box-list .owl-stage .owl-item{
		position: relative;
		height: 100%;
		float: none;
	}
	.product-box-sec .button-sec{
		display: none;
	}
	.product-info-box{
		display: flex;
		-webkit-display: flex;
		-o-display: flex;
		-moz-display: flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
	}
	.product-info-box > div{
		display: block;
		width: 100%;
		padding: 0;
		text-align: center;
	}
	.product-info-box > div img{
		max-width: 600px;
	}
	.product-info-box > div.product-info-box-img{
		order: 1;
		-webkit-order: 1;
		-o-order: 1;
	}
	.product-info-box > div.product-info-box-cont{
		order: 2;
		-webkit-order: 2;
		-o-order: 2;
	}
	.product_information{
		font-size: 16px;
		line-height: 1.7;
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
	}
	.product-info-box > div + div{
		padding-left: 0;
	}
	.product-info-box > div + div .product-info-cont {
		padding-top: 40px;
	}
	.product-info-box > div + div .img-box{
		padding-left: 0;
	}
	.product-info-box > div + div .img-box img{
		max-width: 500px;
	}
	.product-info-box + .product-info-box {
		margin-top: 80px;
	}
	.tab-row > div.left-tool-box{
		width: 100%;
		padding-top: 0;
	}
	.tab-row > div{
		display: block;
	}
	.tab-box .img-box{
		width: 100%;
		display: block;
		position: inherit;
		top: inherit;
		right: inherit;
		text-align: center;
		opacity: 1;
		visibility: visible;
		padding-left: 0;
		margin-bottom: 40px;
	}
	.img-box-box-img{
		text-align: center;
	}
	.tab-box .nav-link.active-a, .no-touch .tab-box .nav-link:hover{
		box-shadow: none;
	}
	.tab-box .nav-link{
		padding: 0;
		width: 100%;
    max-width: 490px;
    margin: 0 auto;
	}
	.tool-title-box > span.tool-icon-box{
		display: none;
	}
	.tool-title-box{
		display: block;
		margin-bottom: 11px;
	}
	.tool-title-box > span.tool-time{
		padding-left: 0;
		text-align: center;
		display: block;
		font-size: 24px;
		color: #252b64;
	}
	.tool-box-info{
		padding-left: 0;
		text-align: center;
		font-size: 18px;
	}
	.img-box-box-img img{
		max-width: 300px;
	}
	.tool-tab-section .section-button{
		display: none;
	}
	.img-box-box-img img{
		margin: 0 auto;
		margin: 0 auto;
		max-height: 268px;
		width: auto !important
	}
	section.tool-section.section-box{
		padding: 50px 0;
	}
	.classroom-info > div{
		display: block;
	}
	.classroom-info{
		display: flex;
		-webkit-display: flex;
		-o-display: flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-m-flex-wrap: wrap;
	}
	.classroom-info > div.classroom-info-sec{
		width: 100%;
		order: 2;
		-webkit-order: 2;
		-o-order: 2;
		text-align: center;
		font-size: 18px;
		line-height: 1.4;
		margin-top: 17px;
	}
	.class-button-sec{
		margin-top: 20px;
	}
	.classroom-sec .grey-bg {
		padding-bottom: 50px;
		padding-top: 50px;
	}
	.classroom-info > div.classsroom-video{
		padding-left: 0;
		margin: 0 auto;
		order: 1;
		-webkit-order: 1;
		-o-order: 1;
	}
	.classroom-info > div.classroom-info-sec h2.section-title{
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
		margin-top: 17px;
	}
	.classroom-info-text {
		margin-top: 15px;
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
		margin-top: 17px;
	}
	.progress-img-box-wrap{
		padding: 0;
		margin: 0;
	}
	.progress-img-section .progress-img-section-bg{
		display: none;
	}
	.progress-img-box-wrap > div{
		padding: 0;
		width: 100%;
	}
	.progress-img-box-thumb img{
		max-width: 230px;
		margin: 0 auto;
	}
	.progress-img-box-info .progress-img-title{
		font-size: 24px;
		margin-bottom: 7px;
	}
	.progress-img-text{
		font-size: 18px;
    padding: 0;
    width: 100%;
    max-width: 425px;
    margin: 0 auto;
	}
	.progress-img-box-info{
		margin-top: 26px;
		font-size: 18px;
	}
	.progress-img-section {
		margin-top: 60px;
	}
	.section-box.get-started-section{
		padding: 60px 0 30px;
	}
	.contact-box div.info-box{
		display: none;
	}
	.footer-logo a img{
		max-width: 160px;
	}
	.social-section ul li a svg{
		width: 38px !important;
		height: 38px !important
	}
	.top-footer {
		padding: 54px 0 44px;
	}
	.contact-box {
		font-size: 18px;
	}
	.top-footer-box-wrap > div{
		vertical-align: middle;
	}
	.footer-box-wrap > div:nth-child(3), .footer-box-wrap > div:nth-child(2), .footer-box-wrap > div:nth-child(1){
		width: 100%;
	}
	.bottom-footer{
		padding: 0;
	}
	.bottom-footer .wrapper{
		padding: 0;
	}
	.footer-box-title{
		position: relative;
		font-size: 17px;
		padding: 20px 55px 19px 20px;
		border-bottom: solid 2px #dfdfdf;
	}
	.footer-box-contain{
		border-bottom: solid 2px #dfdfdf;
	}
	.footer-box-title:after{
		position: absolute;
		top: 0;
		right: 0;
		width: 52px;
		height: 100%;
		display: block;
		content: "";
		background: url(https://www.writestyler.com/public/front/images/down-arrow.svg) no-repeat center center;
		background-size: 14px;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	.active .footer-box-title:after{
		transform: rotate(-180deg);
	}
	.footer-box-contain{
		margin: 0;
		padding: 20px;
		display: none;
	}
	.footer-box-wrap > div:nth-child(4){
		margin-top: 0;
	}
	span.pay-icon img{
		width: auto;
		height: auto;
		max-height: 22px;
	}
	.logo > span.logo-text img {
		max-width: 129px;
	}
	.logo > span.logo-icon img {
		max-width: 41px;
	}
	/******/
	/****** FAQ Page ******/
	.inner-banner-img {
		/*height: 140px;*/
		background: #fff;
	}
	.inner-banner-img img{
		/*opacity: 0;
		visibility: hidden;*/        
	}
	.page-tagline{
		font-size: 20px;
	}
	.faq-box {
		padding: 0 20px;
	}
	.faq-item {
		padding: 15px 0;
	}
	.faq-item h4.faq-title {
		font-size: 16px;
	}
	.faq-item h4.faq-title:after,
	.faq-item.active h4.faq-title:after{
		background-size: 19px;
	}
	.ans{
		font-size: 14px;
		padding-right: 0;
	}
	.faq-item h4.faq-title{
		padding-right: 40px;
	}
	footer {
		margin-top: 30px;
	}
	section.page-title{
		padding-bottom: 10px;
	}
	.faq-item h4.faq-title:after {
		width: 35px;
	}
	/****** Contact page ******/
	.contact_box_cont {
		font-size: 15px;
		line-height: 1.5;
		margin-top: 8px;
	}
	.phone_box, .email_box {
		font-size: 15px;
	}
	.contact_inq_form > div.form-title h4 {
		font-size: 16px;
	}
	/*****/
	/****** About page ******/
	.about-box-wrap > div.about-right{
		width: 100%;
		padding-top: 20px;
		padding-left: 0;
	}
	.about-box-wrap > div{
		display: block;
		margin: 0 auto;
	}
	.slider_wrap {
		padding-left: 50px;
		padding-top: 20px;
		padding-right: 50px;
	}
	.owl-nav button.owl-next {
		left: inherit;
		right: -40px;
	}
	/*****/
	/**** Login page ******/
	.form-box-inner img{
		width: 100%;
		height: auto;
		max-width: 100%;
	}
	/*****/
	.subscription-button-box > div{
		padding: 0 10px;
	}
	.subscription-button-box{
		margin: 0 -10px;
	}
	.login-box-logo img{
		max-width: 150px;
	}
	.login-box-info{
		margin-top: 20px;
	}
	.login-box-info p{
		font-size: 14px;
	}
	.login-box-info h1{
		margin-bottom: 10px;
	}
	.form-box form > div .btn{
		min-width: 130px;
	}
	.form-box form > div p.account-text{
		font-size: 14px;
	}
	.form-box form > div{
		margin-bottom: 15px;
	}
	.form-box form > div:last-child{
		margin-bottom: 0;
	}
	.form-box form > div.forgot-link a{
		font-size: 14px;
	}
	.form-box form{
		margin-top: 15px;
	}
}
@media (max-width:766px){
	.product-box .pro-box{
		min-height: 170px;
	}
}
@media (max-width:639px){
	.login-box-info{
		margin-top: 15px;
	}
	.form-box form > div .btn {
		min-width: 120px;
		font-size: 15px;
	}
	.school-account-form{
		padding: 15px 15px 7px;
	}
	/***** About page ******/
	.slider_wrap{
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
	}
	.tesimonial-box {
		width: 500px;
	}
	.testimonial-text{
		max-width: 200px;
	}
	.about-cont p.tag-line {
		font-size: 16px;
	}
	.aboutcont_box {
		font-size: 15px;
		margin-top: 10px;
	}
	/*****/
	section.home-banner.section-box {
		padding: 45px 0;
	}
	.navigation ul li a{
		font-size: 22px;
	}
	.product-info-box > div img{
		max-width: 450px;
	}
	.product-info-box > div + div .img-box img{
		max-width: 400px;
	}
	.tool-box-info{
		font-size: 16px;
	}
	.tool-title-box > span.tool-time{
		font-size: 20px;
	}
	/***** FAQ Page *****/
	.inner-banner-img{
		/*height: 90px;*/
	}
	.page-tagline {
		font-size: 16px;
	}
	/*****/
	/***** Login page *****/
	.new-account-form {
		padding: 15px 15px 0 15px;
	}
	.login-form{
		padding: 15px;
	}
	/******/
	.plan-compare-box .plan-detail-info table{
		display: none;
	}
	.plan-box-wrap > div{
		width: 100%;
		margin-bottom: 20px;
	}
	.plan-box-wrap > div:last-child{
		margin-top: 0;
		margin-bottom: 0;
	}
	.subscription-button-box > div{
		width: 100%;
		margin-bottom: 30px;
	}
	.subscription-button-inner .btn{
		max-width: 300px;
	}
	.subscription-button-box > div:last-child{
		margin-bottom: 0;
	}
	.plan-compare-box a.accodion-title{
		display: none;
	}
	.plan-compare-box .plan-detail-info{
		border: 0;
	}
	.body-wrap.teachers-box{
		border: 0;
		background: none;
	}
	.subscription-button-box{
		padding-top: 0;
	}
	.school-account-box table.school-data tbody,
	.school-account-box table.school-data,
	.school-account-box table.school-data tr,
	.school-account-box table.school-data tr td{
		display: block;
	}
	.school-account-box table.school-data tr td.blank,
	.school-account-box table.school-data thead th:nth-child(2),
	.school-account-box table.school-data thead th:nth-child(3){
		display: none !important;
	}
	.school-account-box table.school-data tr td:before{
		padding-right: 5px;
		content: attr(data-th) ': ';
		font-size: 14px;
		display: inline-block;
		color: #111111;
		font-weight: bold;
    	font-family: 'Proxima Nova Rg';
	} 
	.school-account-box table.school-data tr td{
		padding: 0 0 15px;
	}
	.school-account-box table.school-data tr td:first-child,
	.school-account-box table.school-data tr td:nth-child(2){
		padding-top: 15px;
	}
	.school-account-box table.school-data tr th,
	.school-account-box table.school-data thead th:nth-child(1){
		display: block;
		width: 100% !important;
		padding-left: 0 !important;
		padding-bottom: 0;
		border: 0 !important;
	}
	.school-account-box table.school-data{
		border-top: solid 2px #dcdcdc;
	}
}
@media (max-width:567px){
	.style-box{
		margin-top: 40px;	
	}
	.copyright-box-wrap > div{
		width: 100%;
		display: block;
		text-align: center !important;
	}
	.copyright-box-wrap > div + div{
		margin-top: 15px
	}
	.progress-img-section {
		margin-top: 30px;
	}
	section.home-banner.section-box {
		padding: 35px 0;
	}
	.mobile-button {
		margin-top: 20px;
	}
}
@media (max-width:479px){
	.style-box ul li {
		padding: 0 5px;
	}
	.style-box ul {
		margin: 0 -5px;
		margin-top: 10px;
	}
	span.svg-icon img {
		/*width: 40px;
		height: 40px;*/
	}
	.style_box .style-box-text {
		font-size: 15px;
		margin-top: 7px;
	}
	.style_box {
		padding: 10px;
	}
	h1, .h1 {
		font-size: 26px;
	}

	h2 {
		font-size: 24px;
	}

	h3 {
		font-size: 20px;
	}
	.banner-info-text{
		font-size: 15px;
		margin-top: 15px;
	}
	.grey-bg {
		padding: 30px 0;
	}
	.section-box.product-info-sec {
		padding: 30px 0 0;
	}
	.tab-box .img-box{
		margin-bottom: 20px;
	}
	.progress-img-section {
		margin-top: 30px;
	}
	.section-box.get-started-section {
		padding: 40px 0;
	}
	.top-footer {
		padding: 34px 0 24px;
	}
	.top-footer-box-wrap > div{
		display: block;
		width: 100%;
		text-align: center;
	}
	.top-footer-box-wrap > div + div{
		margin-top: 20px;
	}
	.img-box-box-img img {
		max-width: 230px;
	}
	.product-info-box > div + div .img-box img {
		max-width: 380px;
	}
	.product-info-box + .product-info-box{
		margin-top: 40px;
	}
	.product-info-box > div img{
		max-width: 380px;
	}
	/*****/
	/***** Contact Page ******/
	.contact_inq_form > div{
		width: 100%;
		display: block;
		box-sizing: border-box;
	}
	.contact_inq_form > div.submit-box{
		margin-top: 15px;
	}
	/*****/
	/***** Login page ******/
	.form-box-wrap > div{
		width: 100%;
		margin-bottom: 15px;
	}
	.login-form .form-box{
		margin-bottom: 15px;
	}
	.form-box-inner img{
		max-width: 240px;
	}
	.form-box-wrap > div .textalignright{
		text-align: left;
	}
	a.linktext{
		font-size: 14px;
	}
	/*****/
	section.school-account-form-sec .form-box-wrap > div{
		margin-bottom: 20px;
	}
	
}
@media (max-width:449px){
	/*.banner-box-wrap > div.media-box .shap-box,*/
        .left-sharp {
		width: 345px;
		height: 307px;
		margin: 0 auto;
	}
	.popup-button {
		left: 72px;
		bottom: -10px;
	}
        /*
	.right-sharp {
    	width: 341px;
		height: 302px;
	}
	.right-sharp .shap-box {
		height: 301px;
	}
        */
}
@media (max-width:374px){
	/*.banner-box-wrap > div.media-box .shap-box,*/
        .left-sharp {
		width: 330px;
		height: 298px;
	}
}
@media (max-width:359px){
	/*.banner-box-wrap > div.media-box .shap-box,*/
        .left-sharp {
		width: 290px;
		height: 260px;
	}
        /*
	.right-sharp {
		width: 288px;
		height: 253px;
	}
        */
}

.hide,
.hidden { display: none !important; }

.unsubscribe-box { min-height: 250px; text-align: center; width: 100%; padding: 75px 0 0; }
.unsubscribe-box h3 { padding-top: 100px; background: url(https://www.writestyler.com/public/front/images/success.svg) no-repeat center top; background-size: 80px; }
.banner-box-wrap > div.media-box .shap-box video::-webkit-media-controls { display:none !important; }

.datepicker table tr td, .datepicker table tr th { vertical-align: middle !important; }

.form-box .input-box { position: relative; }
.form-box i.user-icon {
    background: url(https://www.writestyler.com/public/front/images/user-black-icon.svg) no-repeat;
    background-size: contain;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%); width: 15px; height: 16px;
}
.form-box i.password-icon {
    background: url(https://www.writestyler.com/public/front/images/eye-icon.svg) no-repeat;
    background-size: 23px !important;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px; 
    height: 50px; 
    cursor: pointer;
    background-position: center center !important;
}
.form-box i.password-icon.active {
    background: url(https://www.writestyler.com/public/front/images/eye-icon-active.svg) no-repeat;
    background-size: contain;
}

.row.date-select { margin: 0 -5px; }
.row.date-select .col-sm-4 {  padding: 0 5px; }
.row.date-select span.has-error.error { position: absolute; left: 5px; }
.select2-container { width: 100% !important; }

#signupfom a { color: #e9874b; display: inline-block; font-family: 'Proxima Nova Lt'; font-weight: 600; }
#signupfom a:hover { color: #252b64; }

@media (max-width:767px){
    .form-box-wrap > div { width: 100%; margin-bottom: 15px;}
    .row.date-select .col-sm-4 { margin-bottom: 15px; } 
    .row.date-select.validate .col-sm-4 { margin-bottom: 30px; }
}

@media (max-width:1100px){
.form-box i.password-icon { top: -5px; }
}


.product-info-sec.cms-content { padding-top: 20px; }
.cms-content .product-info-box-img .img-box { position: relative; padding: 0; border-radius: 30px; overflow: hidden; }
.cms-content .product-info-box-img .img-box iframe { width: 100%; min-height: 350px; }
.cms-content .popup-button { left: 50%; top: 50%; bottom: inherit !important; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
.cms-content .product_button-sec { margin-top: 33px; } 
.cms-content .product-info-cont .tag-line { font-size: 20px; }
.cms-content .product-info-box > div { width: 50%; }
.cms-content .product-info-box { margin: 70px 0 0; }
.cms-content .product-info-box:first-child { margin-top: 0; }
.cms-content .connect-content { padding: 24px 0; }

.about-box-wrap .right-sharp-wrap { border: 0; overflow: hidden; }
.about-box-wrap .popup-button { display: block; }

.about-box-wrap .right-sharp-wrap iframe { width: 100%; border: 0; display: block; min-height: 350px; }
.about-box-wrap .right-sharp-wrap .popup-button { display:none; }
.about-box-wrap > div { width: 50% !important; }

@media (max-width:767px){
    .cms-content .product-info-box { margin-top: 30px; }
    .cms-content .product-info-box > div { width: 100%; }
    .cms-content .connect-content { padding: 15px 0; }
    .cms-content .product-info-cont { padding-top: 30px !important; }
    
    .about-box-wrap > div { width: 100% !important; }
}

.footer-box-contain #success-message .alert { margin: 6px 0 !important; padding: 7px 10px 5px !important; }
.footer-box-contain #success-message .alert span.icon { font-size: 18px; position: relative; top: -3px; }


/*Front - career Page style here*/

/*.container { margin: 0 auto; padding: 0 15px; box-sizing: border-box; width: 100%; max-width: 1330px; }*/

.m-title { font-size:34px; margin-bottom: 12px; font-family: 'Proxima Nova Rg'; font-weight: 700; color: #252b64; line-height: 1.18; text-align:center; margin:0 0 20px; }
.featured-box-wrap { font-size: 0; margin: 0 -10px 20px; }
.featured-box-wrap > div { padding: 0 50px; box-sizing: border-box; display: inline-block; vertical-align: top; width: 33.3%; margin: 0 0 20px; }
.featured-title { margin: 0 0 10px; padding: 0; line-height: 24px; font-size: 20px; color: #0e0e0e; font-family: 'Proxima Nova Rg'; height: 48px; overflow: hidden; }
.featured-media-box { position: relative; }
.featured-media-box .thumb { font-size: 0; border-radius: 20px; overflow: hidden; border: 2px solid #ccc; background-color: #fff; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; transition: all 0.5s ease; }
.featured-media-box .thumb:hover { border: solid 2px #252b64; box-shadow: 0 8px 0 rgb(37 61 229 / 5%); }
.featured-media-box .thumb .thumb-image-container { display: inline-block !important; max-width: 100% !important; width: 100% !important; }
.featured-media-box .thumb .thumb-image-wrapper { display: block; height: 0; overflow: hidden; position: relative; z-index: 1; padding-bottom: 100%; }
.featured-media-box .thumb .thumb-image-photo { bottom: 0; display: block !important; height: auto; left: 0; margin: auto; max-width: 100% !important; position: absolute; right: 0; top: 0; }
.featured-media-box.video-box .thumb:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; content: ""; background: rgba(0, 0, 0, 0.3); border-radius: 20px; }
.featured-media-box .thumb img { width: 100%; height: auto; max-width: 100%; }
.featured-media-box .thumb a { display:block; }
.container.games { margin-top:40px; }

@media (max-width:1200px) {
    .featured-box-wrap > div { padding: 0 25px; } 
}

@media (max-width:1023px) {
    .featured-box-wrap > div { padding: 0 15px; } 
}

@media (max-width:767px) {
.m-title { font-size:24px; margin:0 0 20px; }	
.featured-box-wrap { margin-left:-5px; margin-right:-5px; }
.featured-box-wrap > div { width: 50%; margin: 0 0 15px; padding:0 5px; }
}
.section-button { text-align:center; padding:0 15px; margin: 30px 0 0; }