a:link {color:#2538e1ff; text-decoration:none;}
a:visited {color:#2538e1ff; text-decoration:none;}
a:hover {color:#d41e85ff; text-decoration:none;}

a.one:link {color:#ce1c73ff; text-decoration:none;}
a.one:visited {color:ce1c73ff; text-decoration:none;}
a.one:hover {color:#0000ff; text-decoration:none;}

a.two:link {color:#ffffff; text-decoration:none;}
a.two:visited {color:#ffffff; text-decoration:none;}
a.two:hover {color:#ffffff; text-decoration:none;}

a.four:link {color:#4d4d4d; text-decoration:none;}
a.four:visited {color:#4d4d4d; text-decoration:none;}
a.four:hover {color:#d41e85ff; text-decoration:none;}

a.mbar:link {color:#000000; text-decoration:none;}
a.mbar:visited {color:#000000; text-decoration:none;}
a.mbar:hover {color:#000000; text-decoration:none;}

.centerimage {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.hori {width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;}
img.vert {width: auto; height: 100%; display: block; margin-left: auto; margin-right: auto;}
img.vertleft {width: auto; height: 100%; display: block;}

html {
    font-family: Verdana, Geneva, sans-serif;
    color: #4d4d4d;
    background-color: #cccccc;
}

h1 {
color: #ffffff;
padding: 14px 14px;
font-size: 14px;
text-align: left;
font-family: Verdana, Geneva, sans-serif;
}

.h1details {
color: #4d4d4d;
padding: 14px 14px;
font-size: 14px;
text-align: left;
font-family: Verdana, Geneva, sans-serif;
}

h2 {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
color: #4d4d4d;
}

* {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

.verticalcenter {
position: relative;
top: 50%;
transform: translateY(-50%);
}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

.messagebar {
display: none;
}

.mainwrap {
margin:0 auto;
padding:0px 0px 0px 0px;
width: 100%; 
background-color: #ffffff;
}

.headerwrap {
float: left;
width: 100%;
border-color: transparent;
border-style: solid;
border-width: 0px 0px 20px 0px;
}

.logo {
    float: left;
    width: 100%;
    height: 150px;
    text-align: center;
    padding-top: 10px;
}

.searchbutton {
    background-color: #a8eaf5ff;
    border: none;
    color: #000000;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
}

.searchinput {
    width: 80%;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 0px;
    font-size: 12px;
    background-color: white;
    background-image: url('https://www.bvfonts.com/img/2017/searchicon.svg');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 10px 10px 10px 40px;
}

.searchbox {
margin: auto;
width: 80%;
border-color: transparent;
border-style: solid;
border-width: 0px 10px 0px 10px;
}

.navwrapper {
float: left;
width: 100%;
}

.intro {
float:left;
width: 100%;
text-align: center;
padding: 14px 16px;
border-color: transparent;
border-style: solid;
border-width: 0px 0px 0px 0px;
}

.splash {
clear: both;
width: 100%;
border-color: transparent;
border-style: solid;
border-width: 0px 10px 20px 10px;
}

img.frame {
border-color: #ffffff;
border-style: solid;
border-width: 0px 0px 0px 0px;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
}

.frameborder {
position: relative;
border-color:  #cccccc;
border-style: solid;
border-width: 0px;
}

.splashfoot {
    width: 100%;
    padding: 14px 16px;
    font-size: 14px;
    text-align: center;
}

.sub {
    float: left;
    width: 100%;
    text-align: left;
    border-color: transparent;
    border-style: solid;
    border-width: 0px 10px 20px 10px;
}

.subhead {
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    background-color: #29a2ff;
    color: #ffffff;
}

.subfoot {
    width: 100%;
    padding: 0px 0px;
    text-align: right;
}

.hrwraptopspace {
float: left;
width: 100%;
border-color: transparent;
border-style: solid;
border-width: 20px 0px 0px 0px;
}

.hrwrapbottomspace {
float: left;
width: 100%;
border-color: transparent;
border-style: solid;
border-width: 0px 0px 20px 0px;
}

.hr {
float: left;
width: 100%;
border-color:  #29a2ff;
border-style: dashed;
border-bottom-width: 1px;
}

.footwrap {
float: left;
width: 100%;
border-color: transparent;
border-style: solid;
border-width: 20px 0px 0px 0px;
}

.footicons {
float: left;
width: 100%;
}

img.icons {
float: left;
width: auto; 
height: 40px; 
display: block;
padding-top: 10px;
}

.footlogo {
float: left;
width: 40%;
height: 110px;
}

.footmenuleft {
float: left;
width: 30%;
height: 110px;
font-size: 12px;
}

.footmenuright {
float: left;
width: 30%;
height: 110px;
font-size: 12px;
}

ul.footnav {
    list-style-type: none;
    padding: 0;
}

ul.footnav li {
    padding: 15px 0px 0px 0px;
}

.socialicon {
float: left;
width: 100%;
height: 75px;
}

.socialtext {
float: left;
width: 100%;
height: 75px;
text-align: center;
}

.footsocial {
float: left;
width: 100%;
height: 150px;
}

.footsocialwrap {
width: 100%;
text-align: left;
padding: 14px 20px;
color: #4d4d4d;
}

img.ico {width: auto; height: 100%; display: block;}

.footcopyright {
float: left;
font-size: 12px;
width: 100%;
padding: 10px 10px;
text-align: center;
border-color: transparent;
border-style: solid;
border-width: 0px 0px 0px 0px;
}

.todownload {
  display: inline-block;
  background-color: #29a2ff; 
  border-radius: 0px 0px 5px 5px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 12px;
  padding: 10px;
  width: 40%;
  margin: 0px;
}

.fontlabel {
  display: inline-block;
  border-radius: 5px 5px 0px 0px;
  border-style: solid;
  border-width: 1px 0px 0px 0px;
  border-color: #4d4d4d;
  background-color: #4d4d4d;
  color: #FFFFFF;
  text-align: center;
  vertical-align: top;
  font-size: 12px;
  padding: 10px;
  width: 50%;
  margin: 0px;
}

.toptitle {
float: left;
clear: both;
width: 100%;
border-color: #ffffff;
border-style: solid;
border-width: 20px 0px 20px 0px;
background-color: #4d4d4d;
}

.toptitleol {
float: left;
clear: both;
width: 100%;
border-color: #ffffff;
border-style: solid;
border-width: 20px 0px 20px 0px;
background-color: #ffffff;
}

ol.navcrumb {
  list-style-type: none;
  margin: 0px;
  padding: 10px;
}

li.navcrumb {
  display: inline;
  color: #000000;
}

.navcrumb li + li::before {
  display: inline-block;
  margin: 0px 10px;
  transform: rotate(15deg);
  border-right: 2px solid #000000;
  height: 0.8em;
  content: '';
}

.details {
float: left;
clear: both;
width: 100%;
border-color: transparent;
border-style: solid;
border-width: 20px 10px 20px 10px;
}

.detailstitle {
float: left;
width: 100%;
color: #ffffff;
padding: 10px 10px 10px 10px;
font-size: 14px;
text-align: left;
}

img.detailsframe {
border-color: #ffffff;
border-style: solid;
border-width: 0px 0px 0px 0px;
}

.detailsframeborder {
border-color:  #cccccc;
border-style: solid;
border-width: 0px;
}

.detailsfontname {
float: left;
width: 100%;
padding: 14px 14px 14px 14px;
font-size: 14px;
text-align: left;
border-color:  transparent;
border-style: solid;
border-width: 0px;
}

.detailsdescription {
float: left;
width: 100%;
padding: 14px 14px 14px 14px;
font-size: 14px;
text-align: left;
border-color: transparent;
border-style: solid;
border-width: 0px 0px 20px 0px;
}

.detailsinfo {
float: left;
width: 100%;
padding: 14px 14px 14px 14px;
font-size: 14px;
text-align: left;
border-color: transparent;
border-style: solid;
border-width: 0px 0px 20px 0px;
}

.purchaseoption {
float: left;
width: 100%;
background-color: #ffffff;
padding: 14px 14px 14px 14px;
font-size: 14px;
text-align: left;
border-color:  transparent;
border-style: solid;
border-width: 20px 0px 20px 20px;
}

.purchaseicon {
text-align: left;
height: 40px;
width: auto;
background-color: #ffffff;
}

ul.purchaselist { 
padding-left: 1.2em; 
}

.purchaseheaderpad {
float: left;
clear: both;
width: 100%;
border-color: #ffffff;
border-style: solid;
border-width: 20px 0px 20px 0px;
}

.purchaseheader {
float: left;
width: 100%;
background-color: #29a2ff;
color: #ffffff;
padding: 14px 14px 14px 14px;
font-size: 14px;
text-align: center;
}

.purchasedisclosepad {
float: left;
width: 100%;
border-color: #ffffff;
border-style: solid;
border-width: 20px 0px 20px 0px;
}

.purchasedisclose {
float: left;
width: 100%;
color: #4d4d4d;
padding: 14px 14px 14px 14px;
font-size: 14px;
text-align: left;
}

.fontsplash {
    float: left;
    width: 100%;
    text-align: left;
    border-color: transparent;
    border-style: solid;
    border-width: 0px 10px 40px 10px;
}

.newsbox {
    float: left;
    width: 100%;
    text-align: left;
    border-color: transparent;
    border-style: solid;
    border-width: 0px 20px 20px 20px;
}

.newsboxframe {
border-width: 0px 0px 0px 0px;
}

.newsp {
padding: 0px 0px 20px 0px;
}

.font {
    float: left;
    width: 100%;
    text-align: left;
    border-color: transparent;
    border-style: solid;
    border-width: 0px 10px 40px 10px;
}

.fontname {
    width: 100%;
    padding: 14px 16px;
    font-size: 14px;
    text-align: center;
}

.fontimg {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.frameborder:hover .fontimg {
  opacity: 0.4;
}

.frameborder:hover .middle {
  opacity: 1;
}

.midtext {
  background-color: #29a2ff;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.fontfoot {
    width: 100%;
    padding: 0px 0px;
    text-align: right;
}

.paginationwrap {
    float: left;
    width: 100%;
    text-align: right;
    padding: 0px 40px 0px 40px;
}

.paginationnext {
padding: 0px 0px 0px 40px;
}

.paginationprev{
padding: 0px 40px 0px 0px;
}

.infopad {
width: 100%;
padding: 0px 0px 0px 0px;
}

.downloadpad {
width: 100%;
padding: 20px 0px 0px 0px;
}

.thankspad {
width: 100%;
padding: 20px 20px 0px 0px;
}

.thankfontspring {
width: 100%;
padding: 20px 20px 0px 0px;
}

.tfstoptext {
width: 100%;
text-align: center;
}

.tfsbanner {
width: 100%;
}

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #29a2ff;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  width: 200px;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}

.downloadbtn {
  background-color: #ffff00ff;
  border: none;
  border-radius: 10px 10px 10px 10px;
  color: #000000;
  padding: 10px 40px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .5px;
}

.downloadbtn:hover {
  background-color: #ffff4aff;
}

.searchresults { 
width: 100%;
padding: 20px 20px 20px 20px;
}

.faqpad { 
width: 100%;
padding: 40px 20px 0px 20px;
}
.abouttitle {
width: 100%;
float: left;
clear: both;
text-align: center;
font-size: 20px;
padding: 20px 0px 20px 0px;
}

.titleleft {
width: 100%;
float: left;
clear: both;
text-align: left;
font-size: 20px;
padding: 20px 0px 20px 0px;
}

@media only screen and (min-width: 1024px) {
    /* For Desk Top: */
.hide {
display: none;
}

.messagebar {
display: block;
float: left;
width: 100%;
background-color: #ffff00;
color: #000000;
padding: 10px 10px 10px 10px;
font-size: 14px;
text-align: center;
}

.mainwrap {
width: 85%;
padding:0px 0px 0px 40px;
}

.headerwrap {
float: left;
width: 100%;
border-color: transparent;
border-style: solid;
border-width: 20px 40px 20px 0px;
}

.logo {
float: left;
width: 20%;
height: 150px;
padding-top: 20px;
}

.navwrapper {
float: left;
width: 80%;
padding-top: 0px;
}

.searchinput {
    width: 250px;
}

.searchbutton {
    background-color: #a8eaf5ff;
    border: none;
    color: #000000;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
}

.searchbox {
border-color: transparent;
border-style: solid;
border-width: 0px 10px 10px 0px;
}

.searchformright {
float: right;
width: auto;
}

.intro {
text-align: right;
border-color: transparent;
border-style: solid;
border-width: 0px 10px 0px 0px;
}

.splash {
border-color: transparent;
border-style: solid;
border-width: 0px 40px 40px 0px;
}

.splashfoot {
    text-align: left;
}

img.frame {
border-width: 20px 20px 20px 20px;
}

.frameborder {
border-width: 1px;
}

.sub {
width: 50%;
border-color: transparent;
border-style: solid;
border-width: 0px 40px 150px 0px;
}

.footwrap {
border-width: 50px 40px 40px 0px;
}

.footicons{
float: left;
width: 20%;
height: 150px;
}

img.icons {
float: none;
width: 100px; 
height: auto; 
display: block;
padding-top: 10px;
}

.footlogo {
float: left;
width: 20%;
height: 150px;
}

.footmenuleft {
float: left;
width: 20%;
height: 150px;
font-size: 16px;
}

.footmenuright {
float: left;
width: 20%;
height: 150px;
font-size: 16px;
}

ul.footnav li {
    padding: 25px 0px 0px 0px;
}

.footsocial {
float: left;
width: 20%;
height: 150px;
font-size: 16px;
}

.footcopyright {
border-width: 0px 40px 40px 0px;
}

.anibutton {
  width: 34%;
}

.details {
clear: both;
width: 100%;
border-color: transparent;
border-style: solid;
border-width: 0px 40px 40px 0px;
}

.toptitle {
border-width: 20px 40px 20px 0px;
}

.toptitleol {
border-width: 20px 40px 20px 0px;
}

.detailstitle {
width: 100%;
padding: 14px 14px 14px 14px;
}

img.detailsframe {
border-width: 20px 20px 20px 20px;
}

.detailsframeborder {
border-width: 1px;
}

.detailsdescription {
width: 60%;
}

.detailsinfo {
width: 40%;
}

.purchaseheaderpad {
border-width: 20px 40px 20px 0px;
}

.purchasedisclosepad {
border-width: 20px 40px 20px 0px;
}

.purchaseoption {
width: 50%;
}

.fontsplash {
    border-width: 0px 40px 40px 0px;
}

.newsbox {
    border-width: 0px 40px 0px 0px;
}

.newsboxframe {
width: 100%;
text-align: left;
border-color: transparent;
border-style: solid;
border-width: 20px 20px 0px 20px;
}

.font {
width: 50%;
border-color: transparent;
border-style: solid;
border-width: 0px 40px 40px 0px;
}

.fontname {
text-align: left;
}

.faqpad { 
float: left;
clear: both;
padding: 20px 80px 0px 20px;
}

}

@media only screen and (min-width: 1400px) {
.mainwrap {
width: 70%;
padding:0px 0px 0px 40px;
}
}