@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, 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;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Common Header and Footer css start here */
body {
    font-family: 'Merriweather', serif;
}
section {
    width: 100%;
    height: auto;
}
aside {
    width: 1400px;
    height: auto;
    margin: 0px auto;
    padding-left: 20px;
    padding-right: 20px;
}
p {
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    color: #000;
}
/* Inserting this collapsed row between two flex items will make 
 * the flex item that comes after it break to a new row */
.break {
  flex-basis: 100%;
  height: 0;
}
.topgradient {
    background: rgb(0,0,0);
    background: -webkit-linear-gradient(rgba(0,0,0,1) 0%, rgba(255,255,255,0) 90%);
    background: -o-linear-gradient(rgba(0,0,0,1) 0%, rgba(255,255,255,0) 90%);
    background: linear-gradient(rgba(0,0,0,1) 0%, rgba(255,255,255,0) 90%);
    background-position: top;
}

.headerin {
    background-color: #d01f25;
}
.header {
    width:1400px;
    height: 150px;
    margin: 0px auto;
    display: flex;
    align-content: space-between;
    flex-flow: column wrap;
    border-bottom: 1px solid #dfd4c8;
}
.logo {
    width: 280px;
    height: 100px;
    margin: 25px 0px 0px 0px;
}
nav {
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bookappointment {
    margin-top:25px;
    padding: 10px 20px;
    height: 25px;
    font-family: 'Merriweather', serif;
    font-size: 18px;
    line-height: 25px;
    color: #fff;
    background: #d81e25;
    text-decoration: none;
    display: inline-block;
}
.bookappointment a:hover {background-color: #000;}
.bookappointment.black {background: #000; border: 1px solid #000;}
.bookappointment.black:hover {background-color: #d81e25; border: 1px solid #fff;}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
    padding: 10px 20px;
    height: 25px;
    font-family: 'Merriweather', serif;
    font-size: 18px;
    line-height: 25px;
    color: #fff;
    background: #d81e25;
    text-decoration: none;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 260px;
  background-color: #fff;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 10px 0;
  position: absolute;
  z-index: 1;
  top: 105%;
  left: -5%;
  margin-left:0px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext a {padding:5px 10px; color: #000; font-weight: 700; text-decoration: none;}
.tooltip .tooltiptext a:hover {background-color:#fff; border-radius: 5px; font-weight: 700; color: #d81e25; }

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.navbar {
    width: 900px;
    height: 40px;
    margin: 35px 0px 0px 0px;
}


.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}
.navbar ul li {
    list-style-type: none;
}

.navbar a {
    color: white;
    text-align: center;
    padding: 10px 14px;
    text-decoration: none;
    font-weight: lighter;
}

.navbar a:hover {
    background-color:rgba(255,255,255,0.15);
    color: white;
}

.navbar ul li ul
{
  display: none;
}

.navbar ul li:hover ul
{
  display: block;
  position: absolute;
  margin-top: 5px;
  background: #fff;
  border-radius: 6px;
  width: 16%;
  padding: 20px 10px;
  box-shadow: 0px 20px 100px 0px rgba(0, 0, 0, 0.5);
}
.navbar ul li:hover ul li a
{
    display: block;
    color: #000;
    text-align: left;
    padding: 15px 14px;
    
}
.navbar ul li:hover ul li a:hover {
    color: #d81e25;
    background: #f1f1f1;
}

banner {width: 100%; height: 300px; display: block; display: flex; align-items: baseline;}
banner.about {background: url("../images/about_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.glasses {background: url("../images/glasses_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.sunglasses {background: url("../images/sunglasses_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.lenses {background: url("../images/lenses_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.services {background: url("../images/services_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.eyeexam {background: url("../images/eyeexam_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.lenstraining {background: url("../images/lenstraining_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.accessories {background: url("../images/accessories_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.contactin {background: url("../images/contact_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.eyecare {background: url("../images/eyecare_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.insurance {background: url("../images/insurance_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner.insurance {background: url("../images/insurance_banner.jpg") no-repeat center #fcccb7; max-height: inherit;}
banner h2, .page-title {font-family: 'Merriweather', serif; font-size: 55px; color: #000; font-weight: 700; margin-top:120px; text-shadow: 5px 5px 5px #97979752;}

footer {
    margin:100px 0px 0px 0px;
    padding: 0px 0px 25px;
    background-color: #000;
}
.footerbox {
    background: #000;
}
.footercontainer {
    padding: 50px 0px 0px;
}
.footercta {
    height: 275px;
    background: url("../images/footercta_bg.png") no-repeat center #fcccb7;
    text-align: center;
    padding-top: 100px;
}
.footercta a {
    margin-top:25px;
    padding: 15px 15px;
    height: 25px;
    font-family: 'Merriweather', serif;
    font-size: 26px;
    line-height: 25px;
    letter-spacing: 1px;
    color: #fff;
    background-color: #d81e25;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.footercta span.bookbtn {
    margin-top:25px;
    padding: 15px 15px;
    height: 25px;
    font-family: 'Merriweather', serif;
    font-size: 26px;
    line-height: 25px;
    letter-spacing: 1px;
    color: #fff;
    background-color: #d81e25;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.footercta span.bookbtn::after {
    font-family: "Font Awesome 6 Free";
    content: "\f061";
    font-weight: 700;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.footercta span.bookbtn a {
    font-size: 16px;
    margin-top:0px;
    padding: 5px 5px;
    color: #000;
    background-color:#fff;
}
.footercta span.tooltip .tooltiptext {

  top: 105%;
  left:25%;

}
.footercta a:hover {
    background-color: #fff;
    color: #d81e25;
}
.footercta h4 {
    font-family: 'Merriweather', serif;
    font-size: 45px;
    color: #000;
    font-weight: 700;
    text-align: center;
    margin:0px 0px 25px 0px;
}
.footercta h4 span {
    font-family: 'Roboto', sans-serif;
    font-size: 35px;
    color: #000; 
    display: block;
    font-weight: 400;
    text-align: center;
    margin-top: 20px;
}

.footerwidget {
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.fwabout, .footernav {
    width: 525px;
}
.fwabout .logo {
    margin-bottom: 40px;
}

.fwabout p {
    font-size: 20px;
    color: #fff;
    line-height: 40px;
    font-family: 'Merriweather', serif;
    margin-top: 25px;
}
.footernav ul {
    width: 400px;
    list-style-type: none;
    margin: 0px auto;
    padding:50px 0px 0px;
    display: flex;
    flex-wrap: wrap;
}
.footernav ul li {list-style-type: none; width: 50%; padding: 20px 0px; }
.footernav ul li a {
    color: white;
    text-align: center;
    padding: 10px 14px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
}
.footernav ul li a:hover {
    color: white;
}
.footersocial {
    padding: 30px 0px;
    width: 300px;
}
.footersocial .followus {
    
}

.social h6 {
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    color: #fff;
    font-weight: 500;
    text-align: center;
    margin:0px 0px 35px 0px;
}
.social p {
    display: flex;
    justify-content: space-around;
}
.social i.fa-brands {
    padding-right: 15px;
}

.acceptpay {
    margin-top:50px;
}
.acceptpay h6 {
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    color: #fff;
    font-weight: 500;
    text-align: center;
    margin:0px 0px 15px 0px;
}
.acceptpay ul {
    list-style-type: none;
    margin: 0px;
    padding:0px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.acceptpay ul li {list-style-type: none; padding: 20px 0px 5px; text-align: center;}
.footsecnav {
    width: 800px;
    height: 40px;
    margin: 10px auto 25px;
}


.footsecnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
.footsecnav ul li {
    list-style-type: none;
    text-align: center;
}
.footsecnav a {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: #fff;
    padding: 10px 14px;
    text-decoration: none;
}

.footsecnav a:hover {
    color: white;
    padding-bottom: 10px;
    text-decoration: underline;
}
.copyrightfooter {
    width: 1400px;
    height: 40px;
    margin: 10px auto 25px;
}
.copyrightfooter ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content:space-between;
}
.copyrightfooter ul li {
    list-style-type: none;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: #fff;
}
.copyrightfooter a {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: #fff;
    padding: 10px 14px;
    text-decoration: none;
}
.copyrightfooter a:hover {
    color: white;
    padding-bottom: 10px;
    text-decoration: underline;
}

/* Homepage css start here */

.banner {
    width: 100%;
    height: 875px;
    background: url("../images/banner_1.jpg") no-repeat center;
}
.brandbox ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 70px 0px;
    padding: 0px;
    list-style-type: none;
}
.brandbox ul li {
    width: 335px;
    height: auto;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}
.brandbox ul li span a {
    padding: 10px 15px;
    font-size: 18px;
    color: #fff;
    border-radius: 10px;
    background-color: #d81e25;
    position: absolute;
    top: 375px;
    right: 25px;
    z-index: 9999;
}

.raybanwhite {background: url("../images/brandcat_rayban.jpg") no-repeat center #fcccb7;}
.pradawhite {background: url("../images/brandcat_prada.jpg") no-repeat center #fcccb7;}
.vougewhite {background: url("../images/brandcat_vouge.jpg") no-repeat center #fcccb7;}
.versacewhite {background: url("../images/brandcat_versace.jpg") no-repeat center #fcccb7;}
.persolwhite {background: url("../images/brandcat_persol.jpg") no-repeat center #fcccb7;}
.polowhite {background: url("../images/brandcat_polo.jpg") no-repeat center #fcccb7;}
.oakleywhite {background: url("../images/brandcat_oakley.jpg") no-repeat center #fcccb7;}
.gucciwhite {background: url("../images/brandcat_gucci.jpg") no-repeat center #fcccb7;}

.brandrayban a {
    display: block;
    margin: 345px 22px 25px 216px;
    border-radius: 5px;
    background-color: #F31A0F;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    padding: 8px 10px;
    text-decoration: none;
}
.brandrayban a:hover {background-color: #fff; color: #000;}

.brandrayban a::after {
  font-family: "Font Awesome 6 Free";
  content: "\f061";
  font-weight: 700;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

.brandboxtext {
    width: 1000px;
    margin: 0px auto 100px ;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.brandboxtext p {
    font-size: 20px;
    color: #4A4A4A;
    line-height: 30px;
    font-family: 'Merriweather', serif;
    text-align: center;
}
.brandboxcta a {
    margin-top:25px;
    padding: 10px 20px;
    height: 25px;
    font-family: 'Merriweather', serif;
    font-size: 18px;
    line-height: 25px;
    color: #4A4A4A;
    border: 2px solid #d81e25;
    text-decoration: none;
    display: inline-block;
}
.brandboxcta a:hover {
    background-color: #000;
    border: 2px solid #000;
    color: #fff;
}
.aboutbox {
    min-height: 587px;
    height: auto;
    background: url("../images/aboutbox_bg.jpg")  no-repeat center;
}
.aboutboxtext {
    width:600px;
    padding: 50px;
    background-color: rgba(216,30,37,0.8);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    float: right;
}
.aboutboxlogo {
    margin-bottom: 25px;
}
.aboutboxtext h2 {
    font-family: 'Merriweather', serif;
    font-size: 35px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 25px;
}
.aboutboxtext p {
    font-size: 20px;
    color: #fff;
    line-height: 30px;
    font-family: 'Merriweather', serif;
    text-align: center;
}
.newnpopular {
    margin:100px 0px;
}

.newarrivalbox {
    width: 1200px;
    height: 120px;
    padding: 85px 100px;
    background: url("../images/newarrival_banner.jpg") no-repeat center;
}
.newarrivalbox h2 {
    font-family: 'Merriweather', serif;
    font-size: 50px;
    color: #fff;
    font-weight: 700;
    line-height: 60px;
}

.newarrival ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 70px 0px;
    padding: 0px;
    list-style-type: none;
}
.newarrival ul li {
    width: 332px;
    height: 420px;
    margin-bottom: 20px;
    border: 1px solid #c1c1c1;
    text-align: center;
    box-shadow: 0 0 20px 5px #ececec;
}

.newarrival ul li:hover {
    margin-bottom: 20px;
    border: 1px solid #ff1b1c;
    text-align: center;
    box-shadow: 0 0 25px 10px #ececec;
}
.newarrival h6 {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 26px;
    text-decoration: none;
    margin-bottom: 20px;
}
.newarrival p, .newarrival a {
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    text-decoration: none;
    margin-bottom: 20px;
    color: #000;
}
.newarrival p.price {
    font-size: 28px;
    color: #ff1b1c;
    font-weight: 500;
}
.benefits {
    margin:100px 0px;
}
.benefits h2 {
    font-family: 'Merriweather', serif;
    font-size: 50px;
    color: #fd1111;
    font-weight: 700;
    text-align: center;
}
.benefits h2 span {
    font-family: 'Roboto', sans-serif;
    font-size: 35px;
    color: #000; 
    display: block;
    font-weight: 400;
    margin-bottom: 10px;
    text-align: center;
}
.benefits ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 1280px;
    margin: 70px auto;
    padding: 0px;
    list-style-type: none;
}
.benefits ul li {
    width: 300px;
    height: auto;
    margin:0px 190px 50px 0px;
    text-align: center;
}
.benefits ul li:nth-child(3n+3) {
  margin: 0px 0px 75px 0px;
}
.benefits ul li span {
    font-family: "Font Awesome 6 Free";
    font-size: 50px;
}

.benefits ul li p {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    margin-top: 20px;
    line-height: 40px;
    font-weight: 400px;
}
.blogbox {
    margin:100px 0px;
}
.blogbox h2 {
    font-family: 'Merriweather', serif;
    font-size: 55px;
    color: #fd1111;
    font-weight: 700;
    text-align: center;
}
.blogbox h2 span {
    font-family: 'Roboto', sans-serif;
    font-size: 35px;
    color: #000; 
    display: block;
    font-weight: 400;
    margin-bottom: 10px;
    text-align: center;
}
.blogbox ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 1400px;
    margin: 70px auto;
    padding: 0px;
    list-style-type: none;
}
.blogbox ul li {
    width: 445px;
    height: auto;
    text-align: left;
    line-height: 32px;
    overflow: hidden;
}
.blogbox ul li:nth-child(2nd) {
  margin: 0px 35px;
}
.blogbox ul li span {margin:0px; display: block;}
.blogbox ul li h6, .blogbox ul li h6 a {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 32px;
    text-decoration: none;
    margin:15px 0px 10px;
    color: #fd1111;
}
.blogbox ul li h6 a:hover {color: #000;}
.blogbox ul li span {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #626262;
}
.blogboxcta {
    text-align: center;
}
.blogboxcta a {
    margin-top:25px;
    padding: 10px 20px;
    height: 25px;
    font-family: 'Merriweather', serif;
    font-size: 18px;
    line-height: 25px;
    color: #4A4A4A;
    border: 2px solid #d81e25;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.blogboxcta a:hover {
    background-color: #000;
    border: 2px solid #000;
    color: #fff;
}

/* About Page's css start here */

.maincontent {width:100%; padding: 100px 0px; margin: 0px; }
.maincontent h2 {padding: 0px 0px 50px; margin: 0px 0px 50px; border-bottom: 1px solid #d81e25; font-family: 'Merriweather', serif; font-size: 60px; font-weight: 700; color: #000;}
h1.entry-title, h2.entry-title {margin:0px 0px 25px 0px; padding: 0px; border-bottom:none; font-size: 40px; font-weight: 700; color: #000;}
h2.entry-title a:link, h2.entry-title a:visited {color:#000; text-decoration: none;}
h2.entry-title a:hover {color:#d81e25}
h2.comment-reply-title {font-size: 25px; font-weight: 700; color: #000;}
.post-thumbnail {margin:0px 0px 25px 0px;}
footer.entry-footer {margin:0 0 50px 0; background-color:#fff; display: flex; border-bottom: 1px solid #C5C5C5;}
.posted-by, .posted-on, .entry-footer {font-family: 'Merriweather', serif; font-size: 20px; color: #5C5C5C; margin-right: 15px;}
.posted-by a:link, .posted-on a:visited, .entry-footer a:link, .entry-footer a:visited {font-family: 'Merriweather', serif; font-size: 20px; color: #000; text-decoration: none;}
.maincontent p {padding: 0px; margin: 0px 0px 50px; font-family: 'Roboto', sans-serif; font-size: 26px; color: #000; line-height: 45px;}

.maincontent h3 {padding: 0px; margin: 75px 0px 35px; font-family: 'Merriweather', serif; font-size: 50px; font-weight: 700; color: #d81e25; display: block;}
.storedetails {
    margin:0px 0px 100px; text-align: center;
}
.storedetails h3 {
    padding: 0px; margin: 0px 0px 35px; font-family: 'Merriweather', serif; font-size: 50px; font-weight: 700; color: #d81e25; display: block; text-align: center;
}

.maincontent .entry-content h2 {font-size: 40px; margin: 50px 0px 25px; padding: 0px; border-bottom: none; color: #d81e25;}
.maincontent .entry-content h3 {font-size: 30px; margin: 50px 0px 25px; padding: 0px; border-bottom: none; color: #000;}
.maincontent .entry-content p {margin: 0px 0px 25px; padding: 0px;}
.maincontent .entry-content p a:link {color: #d81e25; text-decoration: none;}
.entry-content ul {margin: 25px auto; padding: 0px; }
.entry-content ul li {margin:0px 0px 0px 25px; padding: 5px 0px; list-style-type: disc; font-family: 'Roboto', sans-serif; font-size: 26px; color: #000; line-height: 45px;}
.maincontent .entry-content {color: #d81e25; text-decoration: none;}
.maincontent .entry-footer {}

.storedetails ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1000px;
    margin: 70px auto 0px;
    padding: 0px;
    list-style-type: none;
}
.storedetails ul li {
    width: 400px;
    height: auto;
    margin:0px 0px 50px 0px;
    text-align: center;
}
.storedetails ul li h4 {
    padding: 0px; margin: 0px 0px 35px; font-family: 'Merriweather', serif; font-size: 35px; font-weight: 700; color: #000; display: block;
}

.storedetails ul li p {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    margin-top: 20px;
    line-height: 40px;
    font-weight: 400px;
}
.storebook a {
    margin-top:25px;
    padding: 20px 40px;
    height: 25px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    color: #fff;
    background: #d81e25;
    text-decoration: none;
    display: inline-block;
    border-radius: 50px;
    text-transform: uppercase;
}
.storebook a::after {
    font-family: "Font Awesome 6 Free";
    content: "\f178";
    font-weight: 700;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.storebook a:hover {
    background-color: #000;
}
.favbrands {
    margin:100px 0px;
}
.favbrands h2 {
    font-family: 'Merriweather', serif;
    font-size: 50px;
    color: #fd1111;
    font-weight: 700;
    text-align: center;
}
.favbrands h2 span {
    font-family: 'Roboto', sans-serif;
    font-size: 35px;
    color: #000; 
    display: block;
    font-weight: 400;
    margin-bottom: 10px;
    text-align: center;
}
.favbrands ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1280px;
    margin: 70px auto;
    padding: 0px;
    list-style-type: none;
}
.favbrands ul li {
    width: 300px;
    height: auto;
    margin:0px 0px 75px 0px;
    text-align: center;
}

/* Contct Us page start here */

.contact {
    width:1000px;
    margin: 0px auto 100px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
}
.contact form, .wpcf7 {margin: 50px 0px; }

input[type=text] {
    width:48%;
    padding: 20px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin: 6px 25px 16px 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    border-radius: 10px;
}
input[type=text]:nth-child(even) {margin: 6px 0px 16px 0px;}
textarea {
    width:100%;
    padding: 20px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    border-radius: 10px;
}

input[type=submit] {
    width: 100%;
    background-color: #000;
    border: 1px solid #000;
    color: white;
    padding: 20px 25px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
}
input[type=submit]::after {
    font-family: "Font Awesome 6 Free";
    content: "\f1d8";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    vertical-align: middle;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
input[type=submit]:hover {
  background-color: #d81e25;
  color:#fff;
}

.contact p {margin: 0px 0px 75px 0px; display: block;}


/* Product page start here */

.productbox {
    margin:100px 0px;
}

.productcontent ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 70px 0px;
    padding: 0px;
    list-style-type: none;
}
.productcontent ul li {
    width: 332px;
    height: 420px;
    margin-bottom: 20px;
    border: 1px solid #c1c1c1;
    text-align: center;
    box-shadow: 0 0 20px 5px #ececec;
}

.productcontent ul li:hover {
    margin-bottom: 20px;
    border: 1px solid #ff1b1c;
    text-align: center;
    box-shadow: 0 0 25px 10px #ececec;
}
.productcontent h6 {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 26px;
    text-decoration: none;
    margin-bottom: 20px;
}
.productcontent p, .productcontent a {
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    text-decoration: none;
    margin-bottom: 20px;
    color: #000;
}
.productcontent p.price {
    font-size: 28px;
    color: #ff1b1c;
    font-weight: 500;
}

/* Lenses Page CSS Starts here */
.lensesbox {
    
}
.lensesbox h3 {
    padding: 0px; margin: 0px 0px 25px; font-family: 'Merriweather', serif; font-size: 30px; font-weight: 700; color: #d81e25; display: block;
}
.lensesbox ul {
    /*display: flex;
    flex-wrap: wrap;
    justify-content: space-between;*/
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.lensesbox p {
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    text-decoration: none;
    margin-bottom: 10px;
    color: #000;
}
.lensesbox ul li {
    width: 90%;
    height: auto;
    margin-bottom: 20px;
    padding: 50px;
    box-shadow: 0 0 20px 5px #ececec;
}

/* Lenses Page CSS Starts here */

.servicesbox {
    
}
.servicesbox h3 {
    padding: 0px; margin: 25px 0px; font-family: 'Merriweather', serif; font-size: 20px; font-weight: 700; color: #d81e25; display: block;
}
.servicesbox ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.servicesbox p {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    text-decoration: none;
    margin-bottom: 25px;
    color: #000;
    line-height: 35px !important;
}
.servicesbox ul li {
    width:285px;
    height: auto;
    margin-bottom: 20px;
    padding: 25px;
    box-shadow: 0 0 20px 5px #ececec;
    display: flex;
    flex-direction: column;
}

.servicesbox ul li a {
    width: 35%;
    color:#d81e25;
    padding: 10px 20px;
    border: 1px solid #d81e25;
    border-radius: 50px;
    text-decoration: none;
    margin-top: auto;
    text-align: center;
    margin-bottom: 25px;
    
}
.servicesbox ul li a:hover {
    color:#fff;
    background-color: #d81e25;
    border: 1px solid #d81e25;
    border-radius: 50px;
}



/*================= Responsive CSS Start from Here =================

img {width: 100%;}    
section {width:95%;  margin: 0 auto; }

.topgradient, .banner, .header {width:100%;}
.content {width:100%; }
.aside {width:100%; }
.footer {width:100%; } */

/*===== Small devices (landscape phones, 576px and up) =====*/

@media (min-width: 340px) and (max-width: 575px) {
    
    section {width:95%;  margin: 0 auto; }
    
    aside, .topgradient, .banner, .brandboxtext {width:100%;}
    aside {padding:0px;}
    
    .banner {height:500px; background: url("../images/banner_1.jpg") no-repeat center; background-size: cover;
    background-position-x: -225px;}
    banner {margin-top: 75px; height: 150px;}
    banner h2, .favbrands h2 {Margin: 50px 0px 0px 15px; font-size: 40px;}
    banner.glasses, banner.sunglasses, banner.lenses, banner.accessories, banner.services, banner.eyeexam, banner.eyecare, banner.lenstraining, banner.insurance, banner.about, banner.contactin {background-size: cover;}
    
    .header {
        height: 75px;
        margin: 0px auto;
        position: fixed;
        top:0px;
        left:0px;
        background-color: #000;
        border-bottom:1px solid #d81e25;
        opacity: 0.8;
        z-index: 999;
    }
    .header .tooltip .tooltiptext {width:215px;}
    
    .logo, .logo img {
     width:100px;
     margin: 10px 0px 0px 5px;
    }

    nav {display:contents;}
    
    .bookappointment {
    margin-top: 20px;
    z-index: 999;
    margin-left: 0px;
    }
    .tooltip {
     padding: 5px 10px;
     font-size: 14px;
    }
    .tooltip .tooltiptext {
     width:250px;
     padding: 5px 0;
     left:-15%;
     top:100%;
    }
    
    .banner h2, .favbrands h2 {font-size: 35px;}
    .storedetails {margin: 0px 0px;}
    .storedetails ul {width: 70%; margin: 35px auto 0px;}
    .storedetails ul li h4 {font-size: 28px; margin: 0px 0px 20px;}
    .storedetails ul li p {font-size:20px; line-height:30px;}
    .storebook a {font-size: 16px; padding: 15px 25px; margin-top:0px;}
    
    .maincontent {padding: 25px 0px;}
    .maincontent p {font-size: 20px; line-height: 32px; margin: 0px 0px 25px; }
    .maincontent h3, .storedetails h3 {margin: 25px 0px 15px; font-size: 27px; line-height: 32px;}
    
    .lensesbox ul li {width:88%; padding: 25px;}
    
    .servicesbox ul li {width:85%; margin: 0px auto 20px;}
    
    .storedetails img {width:100%; height: auto;}
    .favbrands {margin: 25px auto;}
    .favbrands ul {width:100%; margin: 25px 0px; justify-content:space-evenly;}
    .favbrands ul li {width: 35%; margin: 0px 0px 50px 0px;}
    .favbrands ul li img {width:100%; height: auto;}
    .favbrands h2 span {font-size:25px;}
    
    input[type="text"], input[type="email"], input[type="url"] {width:75%; padding: 10px; font-size:16px; border: 1px solid #ccc; border-radius: 10px;}
    input[type="submit"] {width:75%; padding:10px 20px;}
    
    .wpcf7-form-control-wrap > input[type="text"], .wpcf7-form-control-wrap > input[type="email"], .wpcf7-form-control-wrap > input[type="url"] {width:96%; padding:10px; font-size:16px; border: 1px solid #ccc; border-radius: 10px;}
    .wpcf7-form > p > input[type="submit"] {width:75%; margin: 0px auto; display: block; padding:10px 20px;}
    
    
    .form-submit {text-align:center;}
    .nav-previous .meta-nav, .nav-next .meta-nav {margin: 0px 0px 10px;}
    .nav-previous p, .nav-next p {font-size:12px; line-height:20px;}
    .nav-links {display:flex; flex-flow:wrap; justify-content: space-around;}
    .nav-previous, .nav-next { width: 45%;}
    
    .brandbox {
     width:100%;
    }
    .brandbox ul {
        margin:25px 0px;
    }
    .brandbox ul li {
     width:48%;
     margin-bottom: 10px;
    }
    .brandbox ul li.raybanwhite {
     background: url("../images/brandcat_rayban.jpg") no-repeat cover #fcccb7;
     background-position:center;
    }
    .brandrayban a {margin:187px 15px 13px 102px; font-size: 12px;}
    .raybanwhite {background: url("../images/brandcat_rayban.jpg") no-repeat center #fcccb7; background-size: cover;}
    .pradawhite {background: url("../images/brandcat_prada.jpg") no-repeat center #fcccb7; background-size: cover;}
    .vougewhite {background: url("../images/brandcat_vouge.jpg") no-repeat center #fcccb7; background-size: cover;}
    .versacewhite {background: url("../images/brandcat_versace.jpg") no-repeat center #fcccb7; background-size: cover;}
    .persolwhite {background: url("../images/brandcat_persol.jpg") no-repeat center #fcccb7; background-size: cover;}
    .polowhite {background: url("../images/brandcat_polo.jpg") no-repeat center #fcccb7; background-size: cover;}
    .oakleywhite {background: url("../images/brandcat_oakley.jpg") no-repeat center #fcccb7; background-size: cover;}
    .gucciwhite {background: url("../images/brandcat_gucci.jpg") no-repeat center #fcccb7; background-size: cover;}
    
    .aboutbox {width:100%;}
    .abouttextresp {padding-top: 25px;}
    .aboutboxtext {width:85%; margin: 20px auto; padding: 20px; float: none; box-sizing: border-box;}
    .aboutboxtext h2 {font-size: 20px;}
    .aboutboxtext p  {font-size: 14px; line-height: 22px;}
    
    .newnpopular {width:100%; margin: 25px 0px;}
    .newarrivalbox {width:100%; padding:25px 0px; background: url("../images/newarrival_banner.jpg") no-repeat right; background-size: cover; background-position-x: -275px; }
    .newarrivalbox h2 {padding: 25px 0px 25px 15px; font-size: 30px; line-height: 40px;}
    .newarrival a img {width:100%;}
    .newarrival ul {margin:25px auto;}
    .newarrival ul li {width:45%; height: auto; padding:0px 0px 10px 0px;}
    
    .benefits {margin: 25px auto;}
    .benefits h2, .blogbox h2 {font-size: 30px; line-height: 40px;}
    .benefits h2 span, .blogbox h2 span {font-size:26px;}
    .benefits ul {width:100%; margin: 50px auto 0px;}
    .benefits ul li {width: 45%; margin:0px 0px 50px 0px;}
    .benefits ul li:nth-child(2) {margin-bottom: 25px;}
    .benefits ul li:nth-child(3) {margin-bottom: 40px;}
    .benefits ul li p {font-size: 20px; line-height: 26px;}
    
    .blogbox {margin: 25px auto;}
    .blogbox ul {width:100%; margin: 25px auto;}
    .blogbox ul li {margin-bottom: 25px;}
    .blogbox ul li h6, .blogbox ul li h6 a {margin-top: 5px; margin-bottom: 0px;}
    .blogbox ul li span {font-size:16px;}
    .entry-content ul li {font-size: 20px; line-height: 32px;}
    .maincontent .entry-content h2 {font-size:26px; line-height: 38px; margin:25px 0px 10px;}
    h1.entry-title, h2.entry-title {font-size: 30px;}
    h2.entry-title, h2.entry-title a:link, h2.entry-title a:visited {font-size:22px; line-height: 35px; margin: 0px 0px 10px 0px;}
    .posted-by, .posted-on, .entry-footer {font-size:14px; margin-bottom:10px;}
    .posted-by a:link, .posted-on a:visited, .entry-footer a:link, .entry-footer a:visited {font-size:14px;}
    footer.entry-footer {flex-flow: wrap; }
    
    .footer {margin: 250px 0px 0px 0px;}
    .footercta {height:175px; margin: 0px auto; padding-top:50px;}
    .footercta h4 {font-size: 26px;}
    .footercta h4 span {font-size: 22px;}
    .footercta span.bookbtn {font-size: 18px; margin-top: 0px;}
    .footercta span.tooltip .tooltiptext  {left: 12%;}
    
    footer {margin:50px 0px 0px 0px;}
    .footerwidget {width: 95%; margin: 0px auto;flex-flow: column;}
    .fwabout {width:75%; margin: 0px auto;}
    .footernav {width:100%;}
    .fwabout {text-align: center;}
    .fwabout p {font-size: 16px; text-align: center;}
    .footernav ul {width: 77%;}
    .footersocial {width: 75%; margin:5px auto;}
    .social h6 {margin: 0px 0px 50px 0px;}
    .acceptpay {margin-top:60px;}
    .footsecnav  {width:100%; margin: 10px auto 50px;}
    .footsecnav a {font-size:17px;}
    .footsecnav ul {width:100%; flex-flow: wrap;}
    .footsecnav ul li {width: 45%; margin-bottom: 15px; }
    .footernav ul li a {font-size: 17px;}
    
    .social p {font-size:15px;}
    
    .copyrightfooter {width:100%;}
    .copyrightfooter ul {flex-flow: column;}
    .copyrightfooter ul li {text-align: center; font-size: 17px; margin-bottom: 10px;}
    .copyrightfooter a {font-size: 17px; padding-left: 5px; }
    

}

@media (min-width: 576px) and (max-width: 767px) {
    
    aside {width:100%;}
    aside {padding:0px;}
    
    .banner {height:500px; background: url("../images/banner_1.jpg") no-repeat center; background-size: cover;
    background-position-x: -215px;}
    banner {margin-top:50px;}
    banner h2 {Margin:120px 0px 0px 25px;}

    
    .header {
        height: 75px;
        margin: 0px auto;
        position: fixed;
        background-color: #000;
        opacity: 0.8;
        z-index: 999;
    }
    .logo, .logo img {
     width:150px;
     margin: 5px 0px 0px 0px;
    }

    nav {display: contents;}

    .bookappointment {
    margin-top: 20px;
    z-index: 999;
    margin-left: -70px;
    }
    .tooltip {
     padding: 5px 10px;
     font-size: 14px;
    }
    .tooltip .tooltiptext {
     width: 215px;
     padding: 5px 0;
    }
    
    .brandbox {
     width:100%;
    }
    .brandbox ul {
        margin:25px 25px;
    }
    .brandbox ul li {
     width:48%;
     margin-bottom: 10px;
    }
    .brandbox ul li.raybanwhite {
     background: url("../images/brandcat_rayban.jpg") no-repeat contain #fcccb7;
     background-position:center;
    }
    .brandboxtext {width:85%;}
    .brandrayban a {margin:181px 15px 13px 161px; font-size: 12px;}
    .raybanwhite {background: url("../images/brandcat_rayban.jpg") no-repeat center #fcccb7; background-size: cover;}
    .pradawhite {background: url("../images/brandcat_prada.jpg") no-repeat center #fcccb7; background-size: cover;}
    .vougewhite {background: url("../images/brandcat_vouge.jpg") no-repeat center #fcccb7; background-size: cover;}
    .versacewhite {background: url("../images/brandcat_versace.jpg") no-repeat center #fcccb7; background-size: cover;}
    .persolwhite {background: url("../images/brandcat_persol.jpg") no-repeat center #fcccb7; background-size: cover;}
    .polowhite {background: url("../images/brandcat_polo.jpg") no-repeat center #fcccb7; background-size: cover;}
    .oakleywhite {background: url("../images/brandcat_oakley.jpg") no-repeat center #fcccb7; background-size: cover;}
    .gucciwhite {background: url("../images/brandcat_gucci.jpg") no-repeat center #fcccb7; background-size: cover;}
    
    .aboutbox {width:100%;}
    .abouttextresp {padding-top: 65px;}
    .aboutboxtext {width:85%; margin: 20px auto; padding: 20px; float: none; box-sizing: border-box; text-align: center; display: block;}
    .aboutboxtext h2 {font-size: 20px;}
    .aboutboxtext p  {font-size: 14px; line-height: 22px;}
    
    .newarrivalbox {width:85%; padding:0px 80px 0px 25px; background: url("../images/newarrival_banner.jpg") no-repeat right; background-size: contain; background-position-x: -15px; }
    .newarrivalbox h2 {padding:25px 0px 25px; font-size: 30px; line-height: 34px;}
    
    .newarrival a img {width:100%;}
    .newarrival ul {margin:25px auto;}
    .newarrival ul li {width:45%; height: auto; padding:0px 0px 10px 0px;}
    
    .benefits {margin: 25px auto;}
    .benefits h2, .blogbox h2 {font-size: 30px; line-height: 40px;}
    .benefits h2 span, .blogbox h2 span {font-size:26px;}
    .benefits ul {width:100%; margin: 50px auto 0px;}
    .benefits ul li {width: 45%; margin:0px 0px 50px 0px;}
    .benefits ul li:nth-child(2) {margin-bottom: 25px;}
    .benefits ul li:nth-child(3) {margin-bottom: 40px;}
    .benefits ul li p {font-size: 20px; line-height: 26px;}
    
    .blogbox {margin: 25px auto;}
    .blogbox ul {width:100%; margin: 25px auto;}
    .blogbox ul li {margin-bottom: 25px auto;}
    
    .footer {margin: 250px 0px 0px 0px;}
    .footercta {height:175px; margin: 0px auto; padding-top:50px;}
    .footercta h4 {font-size: 26px;}
    .footercta h4 span {font-size: 22px;}
    .footercta span.bookbtn {font-size: 18px; margin-top: 0px;}
    .footercta span.tooltip .tooltiptext  {left: 12%;}
    .tooltip .tooltiptext {width: 250px; left: 12%;}

}
    
/*=====  Medium devices (tablets, 768px and up) =====*/
    
@media (min-width: 768px) and (max-width: 1024px) {
    
    aside {width:100%;}
    aside {padding:0px;}

    .banner {height:500px; background: url("../images/banner_1.jpg") no-repeat center; background-size: cover; background-position-x: -215px;}
    banner {margin-top: 75px; height: 197px;}
    banner h2 {Margin:65px 0px 0px 25px; font-size: 45px;}
    banner.glasses {background: url("../images/glasses_banner.jpg") no-repeat 0px 0px #fcccb6; background-size: cover;}
    banner.sunglasses {background: url("../images/sunglasses_banner.jpg") no-repeat 0px 0px #fcccb6; background-size: cover;}
    banner.glasses, banner.sunglasses, banner.lenses, banner.accessories, banner.services, banner.eyeexam, banner.eyecare, banner.lenstraining, banner.insurance, banner.about, banner.contactin {background-size: cover;}
    
    .header {
        height: 75px;
        margin: 0px auto;
        position: fixed;
        top: 0px;
        background-color: #000;
        border-bottom: 1px solid #d81e25;
        opacity: 0.8;
        z-index: 999;
    }
    
    .maincontent {width:95%; margin: 0px auto; padding: 25px 0px;}
    .maincontent p {font-size:20px; line-height: 32px; margin: 0px 0px 25px;}
    .maincontent p a img {width:100%; height: auto;}
    .maincontent h3 {font-size: 27px; line-height: 32px; margin:25px 0px 15px;}
    
    .servicesbox ul {width:100%;}
    .servicesbox ul li {width:42%;}
    
    .lensesbox ul li {padding: 35px;}
    
    .favbrands {margin:25px 0px;}
    .favbrands {margin: 25px auto;}
    .favbrands ul {width:100%; margin: 25px 0px; justify-content:space-evenly;}
    .favbrands ul li {width:16%; margin: 0px 50px 50px 0px;}
    .favbrands ul li img {width:100%; height: auto;}
    .favbrands ul li:nth-child(4n+0) {margin-right:0px;}
    .favbrands h2 span {font-size:25px;}
    .favbrands h2 {font-size:40px;}
    footer {margin:25px 0px 0px 0px;}
    
    
    .logo, .logo img {
     width:150px;
     margin: 5px 0px 0px 5px;
    }

    nav {display: block;}

    .bookappointment {
    margin-top: 20px;
    z-index: 999;
    margin-left: -70px;
    }
    .tooltip {
     padding: 5px 10px;
     font-size: 14px;
    }
    .tooltip .tooltiptext {
     width:250px;
     padding: 5px 0;
     left: -18%;
     top: 36px;
    }    
    
    .storedetails {margin: 0px 0px;}
    .storedetails img {width:100%; height: auto;}
    .storedetails ul {width:80%;}
    .storedetails ul li {width: 45%;}
    .storebook a {font-size:18px;}
    .storedetails h3 {font-size:40px;}
    .storedetails ul li h4 {font-size:30px; margin: 0px 0px 20px;}
    .storedetails ul li p {font-size:20px; line-height:30px;}
    .storebook a {font-size: 16px; padding: 15px 25px; margin-top:0px;}
    
    
    .brandbox {
     width:100%;
    }
    .brandbox ul {
        width: 99%;
        margin:25px auto;
    }
    .brandbox ul li {
     width: 24%;
     margin-bottom: 10px;
    }
    .brandbox ul li.raybanwhite {
     background: url("../images/brandcat_rayban.jpg") no-repeat cover #fcccb7;
     background-position:center;
    }
    .brandboxtext {width:85%;}
    .brandrayban a {margin:210px 15px 13px 125px; font-size: 12px;}
    .raybanwhite {background: url("../images/brandcat_rayban.jpg") no-repeat center #fcccb7; background-size: cover;}
    .pradawhite {background: url("../images/brandcat_prada.jpg") no-repeat center #fcccb7; background-size: cover;}
    .vougewhite {background: url("../images/brandcat_vouge.jpg") no-repeat center #fcccb7; background-size: cover;}
    .versacewhite {background: url("../images/brandcat_versace.jpg") no-repeat center #fcccb7; background-size: cover;}
    .persolwhite {background: url("../images/brandcat_persol.jpg") no-repeat center #fcccb7; background-size: cover;}
    .polowhite {background: url("../images/brandcat_polo.jpg") no-repeat center #fcccb7; background-size: cover;}
    .oakleywhite {background: url("../images/brandcat_oakley.jpg") no-repeat center #fcccb7; background-size: cover;}
    .gucciwhite {background: url("../images/brandcat_gucci.jpg") no-repeat center #fcccb7; background-size: cover;}
    
    .aboutbox {width:100%;}
    .abouttextresp {padding-top: 65px;}
    .aboutboxtext {width:85%; margin: 20px auto; padding: 20px; float: none; box-sizing: border-box; text-align: center; display: block;}
    .aboutboxtext h2 {font-size: 20px;}
    .aboutboxtext p  {font-size: 14px; line-height: 22px;}
    
    .newnpopular {margin: 50px 0px;}
    .newarrivalbox {width:100%; padding: 25px 0px; background: url("../images/newarrival_banner.jpg") no-repeat right; background-size: cover;}
    .newarrivalbox h2 {padding:25px 50px 25px; font-size: 35px; line-height: 40px;}
    
    .newarrival a img {width:100%;}
    .newarrival ul {margin:25px auto;}
    .newarrival ul li {width:23%; height: auto; padding:0px 0px 10px 0px;}
    
    .benefits {margin: 25px auto;}
    .benefits h2, .blogbox h2 {font-size: 30px; line-height: 40px;}
    .benefits h2 span, .blogbox h2 span {font-size:26px;}
    .benefits ul {width:100%; margin: 50px auto 0px;}
    .benefits ul li {width: 30%; margin:0px 0px 50px 0px;}
    .benefits ul li:nth-child(2) {margin-bottom: 25px;}
    .benefits ul li:nth-child(3) {margin-bottom: 40px;}
    .benefits ul li p {font-size: 20px; line-height: 26px;}
    
    .blogbox {margin: 25px auto;}
    .blogbox ul {width:100%; margin: 25px auto;}
    .blogbox ul li {width:32%; margin-bottom: 25px auto;}
    .blogbox ul li h6, .blogbox ul li h6 a {font-size: 18px; line-height: 25px; margin: 15px 0px 0px;}
    .blogbox ul li span {font-size: 16px;}
    
    h1.entry-title {margin-top: 75px;}
    h1.entry-title, h2.entry-title {font-size: 30px; line-height: 36px;}
    .entry-content ul li {font-size: 20px; line-height: 32px;}
    .maincontent .entry-content h2 {font-size:26px; margin: 25px 0px 15px;}
    h2.entry-title a:link, h2.entry-title a:visited {font-size:26px;}
    .posted-by, .posted-on, .entry-footer {font-size:16px; margin-bottom:10px;}
    .posted-by a:link, .posted-on a:visited, .entry-footer a:link, .entry-footer a:visited {font-size:16px;}
    footer.entry-footer {flex-flow: wrap; }
    
    input[type="text"], input[type="email"], input[type="url"] {width:75%; padding: 10px; font-size:16px; border: 1px solid #ccc; border-radius: 10px;}
    input[type="submit"] {width:75%; padding:10px 20px;}
    .form-submit {text-align:center;}
    .nav-previous .meta-nav, .nav-next .meta-nav {margin: 0px 0px 10px;}
    .nav-previous p, .nav-next p {font-size:12px; line-height:20px;}
    .nav-links {display:flex; flex-flow:wrap; justify-content: space-around;}
    .nav-previous, .nav-next { width: 45%;}
    
    .wpcf7-form {width:75%; margin:0px auto;}
    .wpcf7-form-control-wrap > input[type="text"] {width:48%; margin: 6px 5px 16px;}
    
    .footer {margin: 250px 0px 0px 0px;}
    .footercta {height: 170px; margin: 0px auto; padding-top:50px; background-size: cover;}
    .footercta h4 {font-size: 26px;}
    .footercta h4 span {font-size: 22px;}
    .footercta span.bookbtn {font-size: 18px; margin-top: 0px;}
    .footercta span.tooltip .tooltiptext  {left: 12%;}
    
    .fwabout, .footernav, .footersocial {width:30%;}
    .fwabout {margin-right:25px; }
    .fwabout img {width:100%; height:auto;}
    .fwabout p {font-size: 16px; line-height: 30px;}
    .footernav ul {width: 91%;}
    .footernav ul li {width: 40%; padding: 20px 0px;}
    .footernav ul li a {padding: 10px 0px; font-size: 16px;}
    
    .footsecnav {width:100%;}
    .footsecnav a {font-size: 17px;}
    
    .social p {font-size:15px;}
    .acceptpay ul li {width: 30%;}
    .acceptpay ul li img {width:100%;}
    
    .copyrightfooter {width:100%;}
    .copyrightfooter ul {width:95%; margin: 0px auto;}
    .copyrightfooter ul li {text-align: center; font-size: 17px; margin-bottom: 10px;}
    .copyrightfooter a {font-size: 17px; padding-left: 5px; }
    
}

@media (min-width: 1200px) {
    .brandboxtext {width:85%; height: 325px;}
    .brandbox ul li {height:325px;}
    .brandrayban a {margin:210px 15px 13px 132px; font-size: 12px;}
    .raybanwhite {background: url("../images/brandcat_rayban.jpg") no-repeat center #fcccb7; background-size: cover;}
    .pradawhite {background: url("../images/brandcat_prada.jpg") no-repeat center #fcccb7; background-size: cover;}
    .vougewhite {background: url("../images/brandcat_vouge.jpg") no-repeat center #fcccb7; background-size: cover;}
    .versacewhite {background: url("../images/brandcat_versace.jpg") no-repeat center #fcccb7; background-size: cover;}
    .persolwhite {background: url("../images/brandcat_persol.jpg") no-repeat center #fcccb7; background-size: cover;}
    .polowhite {background: url("../images/brandcat_polo.jpg") no-repeat center #fcccb7; background-size: cover;}
    .oakleywhite {background: url("../images/brandcat_oakley.jpg") no-repeat center #fcccb7; background-size: cover;}
    .gucciwhite {background: url("../images/brandcat_gucci.jpg") no-repeat center #fcccb7; background-size: cover;}
}

@media (min-width: 1025px)  and (max-width: 1399px)  {
    
    section {width:100%;}
    aside {width:95%; margin: 0px auto;}
    aside {padding:0px;}
    
    .banner {height:500px; background: url("../images/banner_1.jpg") no-repeat center; background-size: cover;}
    
    banner {height:225px;}
    banner h2, .page-title {font-size:45px; margin:85px 0px 0px 35px;}
    banner.glasses, banner.sunglasses, banner.lenses, banner.accessories, banner.services, banner.eyeexam, banner.eyecare, banner.lenstraining, banner.insurance, banner.about, banner.contactin {background-size: cover;}
    
    .header {width:95%; height: 100px;}
    
    .logo {width:150px; margin: 25px 0px 0px 20px;}
    .logo img {width:100%; height:auto;}
    nav {width:80%; margin-right: 15px;}
    .navbar {width: 100%; margin:0px;}
    .navbar a {font-size:15px;}
    .navbar ul li:hover ul {width:26%; }
    .bookappointment {margin: 12px 15px 15px 25px;}
    .tooltip {font-size: 15px; padding: 5px 20px;}
    .tooltip .tooltiptext {width:245px;}
    .tooltip .tooltiptext a {font-size:15px;}
    
    .maincontent {padding: 25px 0px;}
    .maincontent p {font-size: 20px; line-height: 32px; margin: 0px 0px 25px; }
    .maincontent h3, .storedetails h3 {margin: 25px 0px 15px; font-size: 30px; line-height: 32px;}
    
    .storedetails img {width:100%; height: auto;}
    
    .favbrands {margin: 25px auto;}
    .favbrands ul {width:100%; margin: 25px 0px; justify-content:space-evenly;}
    .favbrands ul li {width:14%; margin:0px 50px 50px;} 
    .favbrands ul li img {width:100%; height: auto;}
    .favbrands h2 span {font-size:25px;}
    
    .servicesbox ul li {width:44%;}
    
    .brandbox {width:100%;}
    .brandbox ul {margin:25px 20px;}
    .brandbox ul li {width:24%;margin-bottom: 10px;}
    
    .brandboxtext {width:85%;}
    .brandrayban a {margin:210px 15px 13px 132px; font-size: 12px;}
    .raybanwhite {background: url("../images/brandcat_rayban.jpg") no-repeat center #fcccb7; background-size: cover;}
    .pradawhite {background: url("../images/brandcat_prada.jpg") no-repeat center #fcccb7; background-size: cover;}
    .vougewhite {background: url("../images/brandcat_vouge.jpg") no-repeat center #fcccb7; background-size: cover;}
    .versacewhite {background: url("../images/brandcat_versace.jpg") no-repeat center #fcccb7; background-size: cover;}
    .persolwhite {background: url("../images/brandcat_persol.jpg") no-repeat center #fcccb7; background-size: cover;}
    .polowhite {background: url("../images/brandcat_polo.jpg") no-repeat center #fcccb7; background-size: cover;}
    .oakleywhite {background: url("../images/brandcat_oakley.jpg") no-repeat center #fcccb7; background-size: cover;}
    .gucciwhite {background: url("../images/brandcat_gucci.jpg") no-repeat center #fcccb7; background-size: cover;}
    
    .brandbox ul li.raybanwhite, .brandbox ul li.pradawhite, .brandbox ul li.vougewhite, .brandbox ul li.versacewhite, .brandbox ul li.persolwhite, .brandbox ul li.polowhite, .brandbox ul li.oakleywhite, .brandbox ul li.gucciwhite {background-size: cover;}
    
    .brandboxtext {width:80%; margin-bottom: 50px;}
    
    .storedetails {margin: 0px 0px;}
    .storedetails img {width:100%; height: auto;}
    .storedetails ul {width:65%;}
    .storedetails ul li {width: 45%;}
    .storebook a {font-size:18px;}
    .storedetails h3 {font-size:40px;}
    .storedetails ul li h4 {font-size:30px; margin: 0px 0px 20px;}
    .storedetails ul li p {font-size:20px; line-height:30px;}
    .storebook a {font-size: 16px; padding: 15px 25px; margin-top:0px;}
    
    .aboutbox {width:100%;}
    .aboutboxtext {width:500px; padding: 25px; margin: 50px;}
    .aboutboxtext p {font-size:16px; line-height:28px;}
    
    .newnpopular {margin:25px 0px;}
    .newarrivalbox {width:100%; padding: 25px 0px; background: url("../images/newarrival_banner.jpg") no-repeat right; background-size: cover;}
    .newarrivalbox h2 {padding:25px 50px 25px; font-size: 35px; line-height: 40px;}
    
    .newarrival a img {width:100%;}
    .newarrival ul {margin:25px auto;}
    .newarrival ul li {width:23%; height: auto; padding:0px 0px 10px 0px;}
    
    .benefits {margin: 25px auto;}
    .benefits h2, .blogbox h2 {font-size: 30px; line-height: 40px;}
    .benefits h2 span, .blogbox h2 span {font-size:26px;}
    .benefits ul {width:100%; margin: 50px auto 0px;}
    .benefits ul li {width: 30%; margin:0px 0px 50px 0px;}
    .benefits ul li:nth-child(2) {margin-bottom: 25px;}
    .benefits ul li:nth-child(3) {margin-bottom: 40px;}
    .benefits ul li p {font-size: 20px; line-height: 26px;}
    
    .blogbox {margin: 25px auto;}
    .blogbox ul {width:100%; margin: 25px auto;}
    .blogbox ul li {width:32%; margin-bottom: 25px auto;}
    .blogbox ul li h6, .blogbox ul li h6 a {font-size: 18px; line-height: 25px; margin: 15px 0px 0px;}
    .blogbox ul li span {font-size: 16px;}
    .entry-content ul li {font-size: 20px; line-height: 32px;}
    .maincontent .entry-content h2 {font-size:26px; line-height: 38px; margin:25px 0px 10px;}
    h1.entry-title, h2.entry-title {font-size:30px; line-height: 35px;}
    
    form p {width:86%; margin: 0px auto;}
    input[type="text"], input[type="email"], input[type="url"] {width:47%; padding: 10px; font-size:16px; border: 1px solid #ccc; border-radius: 10px;}
    input[type="submit"] {width:75%; padding:10px 20px; margin:0px 0px 0px 115px; text-align: center;}
    .posted-by, .posted-on, .entry-footer {font-size:14px; margin-bottom:10px;}
    .posted-by a:link, .posted-on a:visited, .entry-footer a:link, .entry-footer a:visited {font-size:14px;}
    footer.entry-footer {flex-flow: wrap; }
    
    
    .nav-previous .meta-nav, .nav-next .meta-nav {margin: 0px 0px 10px;}
    .nav-previous p, .nav-next p {font-size:15px; line-height:22px;}
    .nav-links {width: 100%; display:flex; flex-flow:wrap; justify-content: space-around;}
    .nav-previous, .nav-next { width: 45%;}
    
    .footerbox {margin:50px 0px 0px;}
    .footercta {height:200px; padding-top:40px; background: url("../images/footercta_bg.png") no-repeat center #fcccb7; background-size: cover; }
    .footercta h4 {font-size: 32px; }
    .footercta h4 span {font-size: 25px; margin-top: 20px;}
    .footercta span.bookbtn {margin-top: 0px; font-size: 20px;}
    .footercta span.tooltip .tooltiptext {left: 15%;}
    
    .fwabout, .footernav, .footersocial {width:30%;}
    .fwabout {margin-right:25px; }
    .fwabout img {width:100%; height:auto;}
    .fwabout p {font-size: 16px; line-height: 30px;}
    .footernav ul {width: 91%;}
    .footernav ul li {width: 40%; padding: 20px 0px;}
    .footernav ul li a {padding: 10px 0px; font-size: 16px;}
    
    .footsecnav a, .copyrightfooter ul li, .copyrightfooter a {font-size:17px;}
    
    .social p {font-size:15px;}
    
    .acceptpay ul li {width: 30%;}
    .acceptpay ul li img {width:100%;}
    
    .copyrightfooter {width:100%;}
    .copyrightfooter ul {width:95%; margin: 0px auto;}
    .copyrightfooter a {font-size:17px; padding:0px 5px;}
    
}