/* CSS Document */

html, body { width: 100%; font-size: 16px; font-family: "museo-sans",sans-serif; font-weight: 100; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; font-smoothing: antialiased; text-rendering: optimizeLegibility; }

* { margin: 0; padding: 0; border: 0; }
a { outline: 0; text-decoration: none; }

.desktophide { display: none; }

/* ------------------------------------------------------------------------------------ */
/* TYPE */
/* ------------------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 { color: #CCCA32; font-family: "museo-sans",sans-serif; font-weight: 100; line-height: 1.3em; }

h1, h3 { font-size: 2.6em; margin: 0; }
h2 { font-size: 1.3em; margin-bottom: 1em; }
h4 { font-size: 1.1em; margin-bottom: .5em; }
footer h4 { font-size: 1em; margin-bottom: .5em; }
.cta { font-size: 2.6em; margin: 0; color: #CCCA32; font-family: "museo-sans",sans-serif; font-weight: 100; line-height: 1.3em;}

p { font-size:1em; line-height: 1.6em; margin-bottom: 1.2em; }

ul, ol { list-style-position: inside; line-height: 1.6em; margin: 0 0 1.2em 0; }
.banner ul { line-height: inherit; margin: inherit; }

ul#team { list-style: none; list-style-position: inside; font-size: 1.35em; }
ul#team li { display: inline-block; margin: 2em .6em 0 .6em; }
ul#team li .fa { font-size: .9em; }

.title { font-size: 3.2em; margin-bottom: 10px; }
.title span, .subtitle span { color: #CCCA32; }
.subtitle { font-size: 1.3em; margin-bottom: 1em; line-height: 1.4em; }
.subtitlesml { font-size: 1.2em; margin-bottom: 1em; line-height: 1.4em; }
.subtitle2 { font-size: 2.2em; margin-bottom: 1em; line-height: 1.4em; }

nav { font-size: .9em; color: #FFF; font-family: "museo-sans",sans-serif; font-weight: 100; }

.banner { text-align: center; }
.banner .fa { font-size: 3em; margin: 0; }
.btn { font-size: 1.4em; font-weight: 400; }
.btn .fa { font-size: 1em; margin: 0; }

blockquote { font-size: 1.6em; margin-bottom: .5em; line-height: 1.4em; }

.form { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #666; }
.form input { color: #FFF; }
.form textarea { color: #FFF; }
.form .send { color: #A6062E; }

footer li { font-size: .9em }
footer .fa { width: 18px; padding-right: 8px; }

.white { color: #FFF; }

.fa { vertical-align: middle; }

.txtcenter { text-align: center; }

label, textarea, input, .form .send { font-family: "museo-sans",sans-serif; font-weight: 100; font-size: 1.2em; color: #FFF; }

/* ------------------------------------------------------------------------------------ */
/* LINKS */
/* ------------------------------------------------------------------------------------ */

a { color: #CCCA32; }
a:hover { color: #000; }

.banner a { color: #CCCA32; }
.banner a:hover { color: #CCCA32; }

nav a { color: #FFF; }
nav a:hover, nav .active { color: #CCCA32; }

.services a li { color: #000; }
.services a li:hover { color: #CCCA32; }

footer a { color: #FFF; }
footer a:hover { color: #CCCA32; }

/* ------------------------------------------------------------------------------------ */
/* BUTTON */
/* ------------------------------------------------------------------------------------ */

.btn { display: inline-block; padding: 0; margin-top: .5em; }
.btn2 a { border: 2px solid #CCCA32; color: #CCCA32; padding: 10px 20px; }
.btn2 a:hover { border: 2px solid #FFF; color: #FFF; }

.btn3 a { border: 2px solid #FFF; color: #FFF; padding: 10px 20px; }
.btn3 a:hover { border: 2px solid #000; color: #000; }

.btn4 a { border: 2px solid #000; color: #000; padding: 10px 20px; }
.btn4 a:hover { border: 2px solid #CCCA32; color: #CCCA32; }

.btn5 a { border: 2px solid #000; color: #000; padding: 10px 20px; }
.btn5 a:hover { border: 2px solid #FFF; color: #FFF; }


/* ------------------------------------------------------------------------------------ */
/* STRUCTURE */
/* ------------------------------------------------------------------------------------ */

.divcontentwrap { float: left; width: 100%; padding: 80px 0; }
.divcontent { position: relative; max-width: 1100px; min-height: 100px; margin: auto; padding: 0 20px; }

.divider { float: left; width: 100%; height: 50px; background: url(../images/d4d_logo_over.png) no-repeat center; background-size: 50px; margin-bottom: 10px; }
.divider2 { float: left; width: 100%; height: 50px; background: url(../images/d4d_logo_bk.png) no-repeat center; background-size: 50px; margin-bottom: 10px; }
.divider3 { float: left; width: 100%; height: 50px; background: url(../images/d4d_logo_wt.png) no-repeat center; background-size: 50px; margin-bottom: 10px; }

header { position: fixed; width: 100%; min-height: 50px; padding: 0; background: #000; z-index: 999; border-bottom: 1px solid #333; }
header  hgroup { position: relative; max-width: 1100px; margin: auto; padding: 0 20px; }
header .logo { float: left; width: 36px; height: 36px; margin-top: 8px; background: url(../images/d4d_logo.png) no-repeat; background-size: 36px; }
header .logo:hover { background: url(../images/d4d_logo_over.png) no-repeat; background-size: 36px;  } 

nav { float: right; padding: 14px 0; }
nav ul { list-style: none; margin: 0; padding: 0; text-align: right; }
nav ul li { display: inline-block; padding: 0 0 0 1.6em; }
nav ul li.tel { padding: 0 .8em; }

.slicknav_menu { display: none; }

#banner { float: left; width: 100%; height: 550px; margin-bottom: 3px; margin-top: 30px; }
#banner .caption { position: relative; width: 90%; height: 100%; top: 200px; left: 50%; margin-left: -45%; }
#banner .captionbtm { position: relative; width: 100%; top: 70%; left: 50%; margin-left: -50%; }

.banner { float: left; width: 100%; height: 550px; margin-bottom: 3px; }
.banner.grey { float: left; width: 100%; height: 550px; margin-bottom: 3px; background: #e7e6e6; }
.caption1 { position: relative; width: 90%; top: 40%; left: 50%; margin-left: -45%; }
.caption2 { position: relative; width: 90%; top: 38%; left: 50%; margin-left: -45%; }
.captionbtm { position: relative; width: 90%; top: 60%; left: 50%; margin-left: -45%; }
.captionmid { position: relative; width: 90%; top: 50%; left: 50%; margin-left: -45%; }
.captionright { position: relative; width: 50%; top: 38%; left: 48%; margin-left: 0; }
.captionrightmid { position: relative; width: 50%; top: 38%; left: 48%; margin-left: 0; }
.captionrighttop { position: relative; width: 50%; top: 20%; left: 48%; margin-left: 0; }
.captionleft { position: relative; width: 48%; top: 33%; left: 52%; margin-left: -50%; }
.captionleftmid { position: relative; width: 48%; top: 40%; left: 52%; margin-left: -50%; }
.captionlefttop { position: relative; width: 48%; top: 20%; left: 52%; margin-left: -50%; }

.captiontop { position: relative; width: 100%; top: 15%; left: 50%; margin-left: -50%; }
.captiontop { font-size: 38px; color: #CCCA32; font-weight: bold; }

.divbannercontent { position: relative; max-width: 100%; height: 550px; margin: auto; padding: 0; }

.divthreecol { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 150px; -moz-column-gap: 150px; column-gap: 150px; text-align: left; }
.divtwocol { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; text-align: left; }

.divservicecol { float: left; width: 30%; text-align: left; margin-left: 3%; }

.maps #gmap_canvas { pointer-events: none; width: 100%; height: 550px; }

.contact { float: left; width: 28%; text-align: left; margin-left: 2%; margin-top: -3%; }
.contact ul { list-style-type: none; }

footer { float: left; width: 100%; padding: 15px 0; background: #000; }
footer .divcol { float: left; width: 23%; }
footer .divcol2 { float: left; width: 27%; }
footer ul { margin: 0 0 1em 0; padding: 0; }
footer li { list-style: none; color: #FFF; line-height: 1.5em; }
footer .top { float: left; width: 100%; text-align: center; font-size: 2.5em; margin: -30px 0 20px 0; cursor: pointer; }

/* ------------------------------------------------------------------------------------ */
/* FORMS */
/* ------------------------------------------------------------------------------------ */

.form { float: left; width: 70%; }
.form .row { float: left; width: 100%; margin-bottom: 5px; }
.form label { float: left; width: 18%; padding: 2%; text-align: left; background: #CCCA32; } 
.form label.full { float: left; width: 96%; padding: 2%; text-align: left; background: #CCCA32; } 
.form input { float: left; width: 74%; padding: 2%; background: #a5ae2f; border: 0; } 
.form textarea { float: left; width: 96%; padding: 2%; height: 100px; overflow: auto; background: #a5ae2f; border: 0; margin: 0 0 5px 0; } 
.form .send { float: left; display: block; width: 100%; padding: 16px 0 12px; cursor: pointer; border: none; background: #CCCA32; -webkit-appearance: none; }
.form .send:hover { background: #97a021; }


/* ------------------------------------------------------------------------------------ */
/* VIN'S CODE */
/* ------------------------------------------------------------------------------------ */

.graph { float: left; width: 100%; background: url(../images/graph2.jpg) no-repeat center top; background-size: 80%; margin-bottom: 0; margin-top: 0;}
.graph .graph-container { float: right; width: 450px; min-height: 150px; margin-right: 120px; margin-top: 18%; margin-bottom: 30px; }
.graph .graph-container .caption-for-graph-header {color: #CCCA32; font-family: "museo-sans",sans-serif; font-weight: 100; line-height: 1.3em; font-size:2.1em; text-align: center; margin-bottom: 10px; }
.graph .graph-container .caption-for-graph p { font-family: "museo-sans",sans-serif; font-weight: 100; line-height: 1.3em; font-size:18px; text-align: justify; }
.graph .graph-container .caption-for-graph .smallprint { font-family: "museo-sans",sans-serif; font-size:11px; text-align: left; font-style: italic; }

.home_topbanner4 { float: left; width: 100%; min-height: 50px; background: url(../images/banners/d4d-banner.jpg) no-repeat center top; background-size: cover; }
.free-scorecard { float: left; width: 100%; min-height: 50px; background: url(../images/banners/top_banner_compliant.jpg) no-repeat center top; background-size: cover; }
.proven-roi { float: left; width: 100%; min-height: 50px; background: url(../images/banners/proven_roi.jpg) no-repeat center top; background-size: cover; }
.dental-apps { float: left; width: 100%; min-height: 50px; background: url(../images/banners/dental_app_banner.jpg) no-repeat center top; background-size: cover; }
.dental-websites { float: left; width: 100%; min-height: 50px; background: url(../images/banners/top_banner_websites.jpg) no-repeat center top; background-size: cover; }

.contact { float: left; width: 28%; text-align: left; margin-left: 2%; margin-top: -3%; }
.contact ul { list-style-type: none; }

footer { float: left; width: 100%; padding: 15px 0; background: #000; }
footer .divcol { float: left; width: 23%; }
footer .divcol2 { float: left; width: 27%; }
footer ul { margin: 0 0 1em 0; padding: 0; }
footer li { list-style: none; color: #FFF; line-height: 1.5em; }
footer .top { float: left; width: 100%; text-align: center; font-size: 2.5em; margin: -30px 0 20px 0; cursor: pointer; }


/* LARGE SCREEN DEVICES */
@media screen 
and (min-width: 1300px) {

.title { font-size: 3.6em; }
.subtitle { font-size: 1.6em; }
.subtitle2 { font-size: 2.6em; }
.captiontop { font-size: 2.6em; }

#banner, .banner, .banner.grey, #advertbanner { height: 750px; }
#banner .caption { top: 300px; }
#banner .captionbtm { top: 60%; }

.divbannercontent { max-width: 90%; height: 750px; margin: auto; padding: 0 5%; }

.caption1 { top: 42%; }
.caption2 { top: 42%; }
.captionright { top: 40%; }
.captionrighttop { top: 30%; }
.captionleft { top: 35%; }
.captionlefttop { top: 30%; }
.captionbtm { top: 65%; }

.maps #gmap_canvas { height: 750px; }

.web_stunning { height: 750px; }

}

/* LARGE SCREEN DEVICES */
@media only screen 
and (min-width : 1024px) 
and (max-width : 1295px) {

.captiontop { font-size: 2em; }

#banner .captionbtm { top: 65%; }
#banner .free-scorecard { float: left; width: 100%; min-height: 50px; background: url(../images/banners/web/top_banner_websites_aria.jpg) no-repeat center top; background-size: cover; }

}


/* TABLETS */
@media only screen 
and (min-width : 768px) 
and (max-width : 1020px) {

body { font-size: 15px; }	

.desktophide { display: block; }
.mobilehide { display: none; }

/* ------------------------------------------------------------------------------------ */
/* TYPE */
/* ------------------------------------------------------------------------------------ */

.banner .title { font-size: 2.5em; }
.banner .fa { font-size: 2em; }
.btn .fa { font-size: 1em; }
.captiontop { font-size: 2em; }

/* ------------------------------------------------------------------------------------ */
/* STRUCTURE */
/* ------------------------------------------------------------------------------------ */

nav { display: none; }
.slicknav_menu { display: block; }

.divcontentwrap { padding: 50px 0; }

header { position: absolute; top: 0; right: 0; padding: 6px 0; width: 100%; z-index: 999; background: transparent; border: none; }
header .logo { float: none; position: relative; margin: auto; width: 35px; height: 35px; }
header .fa { position: absolute; right: 15px; top: 0; color: #FFF; font-size: 1.5em; padding: 6px 0; }

#banner { height: 650px; margin-top: 0; }
#banner .captionbtm { top: 60%; }

.banner { height: 650px; margin-bottom: 3px; }

.caption1 { top: 42%; }
.caption2 { top: 42%; }
.captionright { top: 40%; }
.captionrighttop { top: 30%; }
.captionleft { top: 30%; }
.captionlefttop { top: 25%; }
.captionbtm { top: 65%; }

.divbannercontent { max-width: 100%; height: 650px; }
.apps_branded { background: url(../images/banners/apps/fully_branded.jpg) no-repeat center top; background-size: auto 100%; }
.apps_loyalty { background: url(../images/banners/apps/loyalty_programme.jpg) no-repeat center top; background-size: auto 100%; }
 
.divthreecol { -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; }

/* VINS CODE */
.graph { width: 100%; background-size: 100%; }
.graph .graph-container { float: left; width: 100%; margin-top: 42%; }
.graph .graph-container .caption-for-graph p { text-align: center; }
.graph .graph-container .caption-for-graph .smallprint { text-align: center; }

.form label { width: 20%; } 
.form input { width: 72%; } 

}


/* SMARTPHONES */
@media only screen 
and (min-width : 320px) 
and (max-width : 767px) {
	
body { font-size: 15px; }	

.captiontop { font-size: 1.4em; }

.desktophide { display: block; }
.mobilehide { display: none; }

/* ------------------------------------------------------------------------------------ */
/* TYPE */
/* ------------------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 { line-height: 1.1em; }

h1, h3 { font-size: 2em; }
h2 { font-size: 1.1em; }

.title { font-size: 2em; line-height: 1.1em; }
.subtitle { font-size: 1.1em; }
.subtitlesml { font-size: 1.1em; }

.banner .fa { font-size: 2.2em; }
.btn { font-size: 1em; }
.btn .fa { font-size: .8em; }

/* ------------------------------------------------------------------------------------ */
/* STRUCTURE */
/* ------------------------------------------------------------------------------------ */

nav { display: none; }
.slicknav_menu { display: block; }

.divcontentwrap { padding: 50px 0; }

header { position: absolute; top: 0; right: 0; padding: 6px 0; width: 100%; z-index: 999; background: transparent; border: none; }
header .logo { float: none; position: relative; margin: auto; width: 35px; height: 35px; }
header .fa { position: absolute; right: 15px; top: 0; color: #FFF; font-size: 1.5em; padding: 6px 0; }
 
#banner { min-height: 350px; margin-top: 0; background: #000; }
#banner .caption { top: 90px; }
#banner .captionbtm { top: 45%; }
 
.divbannercontent { width: 100%; height: 650px; }
 
.banner, #advertbanner, .banner.grey { height: 650px; }

.banner-logo { float: left; width: 300px; height: auto; text-align: center; }
.banner-logo IMG { width: 300px; height: auto; }

.captionright, .captionleft, .captionleftmid, .captionrightmid, .captionlefttop, .captionrighttop, .captionbtm { position: relative; width: 90%; top: 55%; left: 50%; margin-left: -45%; }
.captionleftmid { top: 40%; }
.captionrightmid { top: 40%; }
.captionlefttop, .captionrighttop { top: 45%; }
.captionbtm { top: 60%; }

.divthreecol, .divtwocol { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; }
.divservicecol { width: 97%; }

.contact { width: 100%; margin-left: 0; margin-top: 2em; }

/* VINS CODE */
.graph { width: 100%; background: url(../images/graph_mobile.jpg) no-repeat; background-size: 100%; }
.graph .graph-container { float: left; width: 100%; margin-right: 0; margin-top: 50%; }
.graph .graph-container .caption-for-graph p { text-align: center; }
.graph .graph-container .caption-for-graph .smallprint { text-align: center; }

.home_topbanner4 { float: left; width: 100%; background: url(../images/banners/d4d-banner.jpg) no-repeat center 100px; background-size: auto 50%; }
.free-scorecard { float: left; width: 100%; background: url(../images/banners/mobile/top_banner_compliant.jpg) no-repeat center top; background-size: auto 45%; }
.proven-roi { float: left; width: 100%; background: url(../images/banners/mobile/proven_roi.jpg) no-repeat center top; background-size: auto 45%; }
.dental-apps { float: left; width: 100%; background: url(../images/banners/mobile/dental_app_banner.jpg) no-repeat center top; background-size: auto 50%; }
.dental-websites { float: left; width: 100%; background: url(../images/banners/mobile/top_banner_websites.jpg) no-repeat center top; background-size: auto 45%; }

.form { width: 100%; }
.form label { width: 94%; padding: 3%; } 
.form label.full { width: 94%; padding: 3%; } 
.form input { width: 94%; padding: 3%; } 

footer .divcol { width: 100%; }
footer .divcol2 { width: 100%; }

}