/*** CSS NATH-VETERINAIRE.CH - by Artamedia.net **/

/*FONT*/
body {font-family: 'Open Sans', sans-serif; font-size: 14px}
h1, h2, h3, h4 {font-family:'Arvo', serif;}
h1, h2, h3 {text-align: center}
h2 {font-size:36px; line-height: 200%}
h3 {font-size:30px; line-height: 160%; margin: 24px 0 16px 0; font-weight: 500}
h3.qx-blurb-title  {font-size:24px; line-height: 100%; margin:16px 0 0 0; font-weight: 100}
h4 {font-size:24px; line-height: 160%; margin: 16px 0 8px 0; font-weight: 300}
h5 {font-size:18px; line-height: 140%; margin: 12px 0 6px 0; font-weight: 300}
.subtitle {font-size:20px; line-height: 160%; text-align: center!important}

/*LIENS*/
a {color:#0b66af}
a:hover {color:#aecae1}

/*BARRE NAV TOP*/
#sp-header {background-color:#0b66af; height: 48px}
#sp-header #sp-logo {padding: 0}
#sp-header #sp-logo .logo a {display:block;  color: #fff; font-size:16px; font-weight: bold; padding-left: 36px; line-height: 30px; margin:8px 0; background-image:url("../../../images/logo-croix.png"); background-repeat: no-repeat; background-position:0 0;}
#sp-header #sp-logo .logo a:hover {color: #fff}
#sp-header #sp-logo .logo p {margin:0}

/*nav*/
ul.sp-megamenu-parent {float:none; margin: 0; width: 100%; text-align: center}
ul.sp-megamenu-parent >li >a {line-height: 48px; color:#fff; font-weight: 600; text-transform: uppercase}
ul.sp-megamenu-parent > li.active > a, ul.sp-megamenu-parent > li:hover > a {font-weight: 600; background: none; color:#aecae1}

/*responsive menu*/
#offcanvas-toggler {line-height: 40px!important;}
#offcanvas-toggler >i {color: #aecae1}
#offcanvas-toggler >i:hover {color: #fff}

.burger-icon>span {background-color:#fff}
.offcanvas-menu .logo a {font-size: 120%; font-weight: 600}

/*Langues*/
.mod-languages {text-align: right} 
.mod-languages ul >li >a {line-height: 48px; color:#fff; font-size: 12px}
.mod-languages ul >li.lang-active {background: none!important}
.mod-languages ul >li.lang-active a {color:#aecae1!important}
.mod-languages ul >li >a:hover {color:#aecae1}


/*SECTIONS*/
#sp-main-body {padding: 0}
#biglogo {text-align: center; padding: 16px 0 0 0}
#maintitle {
    background-image: url("../../../images/cabinet-veterinaire-sembrancher.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	text-align: center
}
#maintitle h1 {font-size:60px; color:#fff; text-shadow: rgb(0,0,0) 2px 0px 0px, rgb(0,0,0) 1.75517px 0.958851px 0px, rgb(0,0,0) 1.0806px 1.68294px 0px, rgb(0,0,0) 0.141474px 1.99499px 0px, rgb(0,0,0) -0.832294px 1.81859px 0px, rgb(0,0,0) -1.60229px 1.19694px 0px, rgb(0,0,0) -1.97998px 0.28224px 0px, rgb(0,0,0) -1.87291px -0.701566px 0px, rgb(0,0,0) -1.30729px -1.5136px 0px, rgb(0,0,0) -0.421592px -1.95506px 0px, rgb(0,0,0) 0.567324px -1.91785px 0px, rgb(0,0,0) 1.41734px -1.41108px 0px, rgb(0,0,0) 1.92034px -0.558831px 0px;}
#maintitle h2 {font-size:30px; color:#fff; text-shadow: rgb(0,0,0) 1px 0px 0px, rgb(0,0,0) 0.540302px 0.841471px 0px, rgb(0,0,0) -0.416147px 0.909297px 0px, rgb(0,0,0) -0.989992px 0.14112px 0px, rgb(0,0,0) -0.653644px -0.756802px 0px, rgb(0,0,0) 0.283662px -0.958924px 0px, rgb(0,0,0) 0.96017px -0.279415px 0px;}

#relation, #about {background: #aecae1}
#services ul {text-align: left}
#about {padding-bottom: 40px}
#about p {text-align: justify}
#about img {margin:0 auto}

/*CONTACT*/
#contact {text-align:center}
#contact .qx-col-wrap h3.qx-title {margin: 0 auto; padding: 0 0 24px 0}
#contact .qx-element-blurb__body p {font-size: 16px}
.convertforms .cf-label .cf-required-label {color: #0b66af; font-weight: 400; display: none}
.convertforms .cf-label {font-weight: 300; text-align: left}
.convertforms.cf-success .cf-response {background-color: #ccd5db; color:#333}

/*Captcha*/
iframe .rc-anchor-center-container, iframe .rc-anchor-compact .rc-anchor-content {height: 50px!important}
/*Map*/
#colmap {padding:0}

/*FOOTER*/
#sp-footer {background: #0b66af; text-align: center; color:#fff; padding: 16px}
#sp-footer p {margin:0}
#sp-footer a {color:#aecae1}
#sp-footer a:hover, #sp-footer a:focus {color:#fff}
#sp-footer .container-inner {border: none; padding: 0}

.qx-col-xs-12 {padding:32px}

@media (max-width: 767px) {
    #sp-menu {position: relative; right: 0; top: 0}
    #about .qx-col-xs-12 {padding: 0 32px}
}

@media only screen and (max-width: 600px) {
    #maintitle h2.qx-title {font-size:50px}
    #maintitle p.subtitle  {font-size:24px} 
    }
@media (max-width: 480px) {
	#sp-header #sp-logo {padding: 0 8px 0 8px}
}