/* ======== FONT-FACE ======== */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);


/* Boostrap overrides ===================================================================================================================================================== */

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

.row {margin:0px;}

body {background-color:#e6e7e8;}

/* Global =================================================================================================================================================================  */

a.button {
	-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	-moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	-o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	-o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
}

small, .small {
    font-size: 11px;
}

/* Header ================================================================================================================================================================= */

header {height: 174px; border-bottom: 1px solid #d7d7d8; background-color: #ffffff; background-image: url(../images/corner-device-purple.png); background-repeat: no-repeat; background-position: top right;}
.head-panel {max-width:1200px; margin:0 auto; min-height:174px;}
.left-logo {background-image: url(../images/bravecto-logo.png); background-repeat: no-repeat; display: block; width: 240px; height:79px; float:left; margin-top:45px;}
.right-logo {background-image: url(../images/twelve-week-protection_logo.png); background-repeat: no-repeat; display: block; width: 200px; height: 58px; float: right; margin-top: 78px; background-size: contain;}

/* Content =============================================================================================================================================================== */

.main-panel {border-top:2px solid #f0f0f1;}

.cont-panel {max-width:1200px; margin:0 auto; min-height:480px;}
.cont-panel h2 {color:#ffffff; font-size:32px; padding-bottom:30px; margin:0; padding-top: 0px; font-weight:bold;}
.cont-panel h3 {color:#ffffff; font-size:24px; padding-bottom:30px; margin:0; font-weight:bold;}
.cont-panel p {color:#ffffff; font-size:16px; line-height: 24px; padding-bottom: 50px;}
.cont-panel a.button {display:block; border:2px solid #ffffff; padding:10px 50px; text-align: center; color:#ffffff; font-size:20px; font-weight: bold;}

.cont-panel a.button:hover {text-decoration:none; background-color: #4f2d80; color:#ffffff;}
.cont-panel img {width:auto}

.cont-contain {padding:50px 130px 20px 0px;}

.content-left {max-width:480px; float:left;}
.image-right {float:right; margin-top:60px;}

.content-right {max-width:480px; float:right;}
.image-left {float:left; margin-top:60px; margin-right:0%;}
.h-right {text-align: right;}

.head-content { min-height:600px !important; background-image:url(../images/header-bg.png); background-repeat: no-repeat; background-position:bottom right;}
.head-content h2 {font-size:48px; color:#231f20; margin: 0px; font-weight:bold; padding-top:0;}
.head-content h2 span {color:#4f2d80;}
.head-content h3 {font-size:32px; color:#4f2d80; margin:0; padding-bottom:30px; font-weight:bold;  }
.head-content p {color:#231f20; font-size:16px; line-height: 24px; font-weight: 100; margin:0; padding-bottom: 15px; max-width:500px;}
.head-content a.button {display:block; border:2px solid #4f2d80; padding:10px 50px; text-align: center; color:#4f2d80; font-size:20px; font-weight: bold; max-width:460px;}

.purple {background-color:#4f2d80; padding: 20px 0px; min-height:480px;}
.purple a.button:hover {text-decoration:none; background-color: #231a2f; color:#ffffff; border:2px solid #ffffff; }
.red {background-color:#e71b39; padding: 20px 0px; min-height:480px;}
.red a.button:hover {text-decoration:none; background-color: #832734; color:#ffffff; border:2px solid #ffffff; }
.orange {background-color:#f48e23; padding: 20px 0px; min-height:480px;}
.orange a.button:hover {text-decoration:none; background-color: #82501d; color:#ffffff; border:2px solid #ffffff; }

.tic {background-image:url(../images/big-tic-project.png); background-repeat: no-repeat; background-position:96% top; }

/* Footer ================================================================================================================================================================= */

footer {padding: 20px 0px; background-color: #ffffff; background-image: url( ../images/sidetab-whitesp-EN.png); background-repeat:no-repeat; background-position: left bottom; }
.foot-cont {margin-bottom:0%;/*background-image:url(../images/bravecto-logo_foot.png); background-repeat: no-repeat; background-position: bottom right;*/min-height:350px;padding-top:30px;padding-right:0px;position: relative;}
.foot-cont p {color:#231f20;font-size: 12px;line-height: 19px;padding-bottom: 10px;margin:0;}
.foot-cont ul li {color:#231f20; font-size:10px; line-height: 14px; margin:0;}
.foot-links {float:right;clear:both;right: 0;bottom: 16px;position: absolute;text-align: right;}
.foot-links a {text-align:right;margin-left: 15px;color:#231f20;font-size: 10px;}
.foot-links a:hover {text-decoration: underline;}


/* Welcome page ============================================================================================================================================================ */
BODY.body--welcome                          {background-color:#FFF; overflow-x:hidden; font-family:'Open sans', Arial, Helvetica, Geneva, sans-serif;}
.page-limits                                {width:100%; max-width:1280px; padding:0 20px; margin:0 auto;}

/* Header area  */
HEADER.image-header                         {position:relative; clear:both; width:100%; height:420px; padding-top:280px; border-bottom:none; margin-bottom:20px; background-color:transparent; overflow:hidden;}
.image-header__bkg-img                      {position:absolute; top:50%; left:50%; z-index:-1; transform:translate(-50%,-50%); width:auto; height:auto; min-width:100.01%; min-height:100.01%; max-width:200%;}

/* Main page title block */
.heading-block                              {position:relative; z-index:100; bottom:0; width:100%; height:140px; padding:48px 48px 24px;}
.heading-block:before                       {content:''; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; width:100%; margin:auto; background:linear-gradient(to bottom, #4F2D80 0%, #E71B39 100%); opacity:0;}
.heading-block:after                        {content:''; position:absolute; z-index:-1; top:0; bottom:0; left:-250%; right:-250%; width:auto; margin:auto; background:linear-gradient(to bottom, #4F2D80 0%, #EA1A3E 100%); opacity:0.6;}
H1.heading-block__title                     {margin:0; text-align:center; text-transform:uppercase; font-family:'Open sans', Arial, Helvetica, Geneva, sans-serif; font-size:32px; font-weight:600; color:#FFF;}

/* Main content area */
MAIN.page-main                              {clear:both; width:100%;}

/* Content boxes section */
SECTION.content-boxes                       {display:flex; flex-direction:row; justify-content:space-between; align-items:stretch; position:relative; width:100%;}
SECTION.content-boxes:before                {content:''; position:absolute; z-index:-1; top:0; left:-100%; transform:translate(-20px,0); height:100%; width:100%; background-color:#DDEBF6;}
SECTION.content-boxes:after                 {content:''; position:absolute; z-index:-1; top:0; right:-100%; transform:translate(20px,0); height:100%; width:100%; background-color:#DDEBF6;}

/* Content box */
.content-box                                {flex:0 1 49%;}
.content-box:nth-child(even)                {margin-left:20px;}
.content-box.content-box--primary           {background-color:#E71B39; color:#FFF;}
.content-box.content-box--secondary         {background-color:#4F2D80; color:#FFF;}
.content-box.content-box--tertiary          {background:linear-gradient(to bottom, #E71B39 50%, #F48E22 100%); color:#FFF;}
.content-box.content-box--quarternary       {background:linear-gradient(to bottom, #4F2D80 50%, #0099D6 100%); color:#FFF;}
.content-box__viewport                      {position:relative; width:100%; height:360px; overflow:hidden;}
IMG.content-box__image                      {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:auto; height:auto; min-width:100.01%; min-height:100.01%; max-width:120%;}
.content-box__body                          {width:100%; padding:24px;}
.content-box__text                          {width:100%; margin-bottom:24px;}
H2.content-box__heading                     {margin:0 0 24px; text-transform:uppercase; font-family:'Open sans', Arial, Helvetica, Geneva, sans-serif; font-size:24px; font-weight:600;}
.content-box__text P                        {font-family:inherit; font-size:16px; color:inherit;}
.content-box__buttons                       {display:flex; flex-direction:row; justify-content:space-between; align-items:stretch;}
.content-box__button-set                    {flex:1 1 50%; padding:0 8px; text-align:center;}
.content-box__logo-viewport                 {position:relative; width:100%; height:120px; margin-bottom:24px; text-align:center;}
.content-box__logo                          {position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}
A.content-box__button                       {display:block; width:100%; padding:12px; border:2px solid #FFF; margin:0 6px 24px; transition:opacity 0.3s ease-out; 
                                             text-align:center; text-transform:uppercase; font-size:13px; font-weight:600; color:inherit;}
A.content-box__button:hover                 {text-decoration:none; opacity:0.5;}
NAV.content-box__social-nav                 {width:100%; height:auto; margin-top:24px; text-align:center;}
A.social-nav__nav-link                      {display:inline-block; width:24px; height:24px; margin:0 12px;} 
A.social-nav__nav-link.social-nav__nav-link--facebook   {background:url(../images/icon-social_facebook_white_24.png) center center no-repeat;}
A.social-nav__nav-link.social-nav__nav-link--twitter    {background:url(../images/icon-social_twitter_white_24.png) center center no-repeat;}
A.social-nav__nav-link.social-nav__nav-link--instagram  {background:url(../images/icon-social_instagram_white_24.png) center center no-repeat;}

/* Footer */
FOOTER.site-footer                          {position:relative; width:100%; height:auto; min-height:360px;}
FOOTER.site-footer .page-limits             {position:relative; min-height:320px}
.footer-content                             {padding-bottom:140px;}
.footer-content P                           {font-size:11px;}
NAV.footer__nav                             {position:absolute; bottom:20px; right:20px; text-align:right; font-size:10px;}
A.footer__nav-link                          {margin-left:16px; font-size:inherit; color:#333; transition:color 0.3s ease-out;}
A.footer__nav-link:hover                    {text-decoration:none; color:#000;}



/* Media queries ===========================================================================================================================================================*/

/* Small desktop to tablet */
@media (max-width:1280px) {
	
	.col-md-12{padding-right: 0px;padding-left: 0px;}
	.row {margin-right:0px; margin-left:0px;}
	
	.head-panel {padding: 0px 30px;}
	
	.cont-panel {min-height:600px;}
	.cont-contain {padding:50px 90px 20px 30px;}
	.cont-panel img {width:40%;}
	.content-left {max-width:50%; float:left;}
	.image-right {float:right; margin-top:60px;}

	.content-right {max-width:50%; float:right;}
	.image-left {float:left; margin-top:60px; margin-right:0%;}
	.h-right {text-align: right;}
	.foot-cont {padding:20px 70px; min-height:auto}
	
}

/* Tablet landscape */
@media (max-width:1024px) {
	
	.cont-panel img {width:40%;}
	.content-left {max-width:50%; float:left;}
	.image-right {float:right; margin-top:60px;}

	.content-right {max-width:50%; float:right;}
	.image-left {float:left; margin-top:60px; margin-right:0%;}
	.h-right {text-align: left;}
	.cont-panel h2 {padding-top: 0px;}
}

/* Tablet portrait*/
@media (max-width:768px) {
	
	header {height:124px; background-size:50%;}
	.head-panel {min-height:124px;}
	.left-logo {width: 170px; height:60px; float:left; margin-top:35px; background-size: 100%;}
    .right-logo {width:170px; height:50px; float:right; margin-top:64px; background-size: 100%;}
	.head-content {background-size:60%;}
	
	.cont-panel img {width:auto;}
	.content-left {max-width:100%; float:none;}
	.image-right {float:none; margin-top:30px; margin-bottom:30px}
	.image-left {float:none; margin-top:30px; margin-bottom:30px; margin-right:0%;}
	.content-right {max-width:100%; float:none; clear:both;}
	.cont-panel a.button {max-width:400px;}
	
	.foot-cont {min-height:400px; padding-top:30px; padding-right:70px; background-size: 20%;}
	.foot-cont p {font-size:10px; line-height: 12px; padding-bottom: 10px; margin:0;}
	.foot-cont ul li {font-size:10px; line-height: 12px; margin:0;}

    /* Welcome page ============================================================================================================================================================ */

    .page-limits                                {padding:0;}

	/* Header area  */
    HEADER.image-header                         {height:320px; padding-top:180px; border-bottom:none; margin-bottom:0;}
    .image-header__bkg-img                      {left:37.5%; max-width:200%;}

    /* Main page title block */
    .heading-block                              {height:140px; padding:48px 64px 24px;}
    .heading-block:before                       {width:150%; left:-150%; right:-150%;}
    /*.heading-block:after                        {display:none}*/
    H1.heading-block__title                     {font-size:24px;}

    /* Content boxes section */
    SECTION.content-boxes                       {flex-direction:column; justify-content:flex-start; align-items:stretch;}

    /* Content box */
    .content-box                                {flex:1 1 auto;}
    .content-box:nth-child(even)                {margin-left:0;}
    .content-box__viewport                      {height:350px;}
    .content-box__text                          {text-align:center;}

    /* Footer */
    FOOTER.site-footer                          {padding-top:0;}
    .footer-content                             {padding:20px 20px 140px;}
}

/* Mobile */
@media (max-width:480px){

	header {height:90px; background-size:50%; }
	.head-panel {min-height:90px; padding:0px 20px;}
	.head-content {min-height: 540px !important;}
	.head-content h2 {font-size: 26px; margin: 0px;padding-top: 0;}
	.head-content h3 {font-size: 18px; margin: 0; padding-bottom: 20px;}
	.head-content p {font-size: 14px; line-height: 18px; padding-bottom: 15px;}
	.head-content a.button {display: block; border: 2px solid #4f2d80; padding: 10px 30px; font-size: 15px;}
	
	.tic {background-size: 10%;}
	
	.cont-panel {min-height: 500px;}
	.cont-panel h2 {font-size: 22px; padding-bottom: 20px; max-width: 270px;}
	.cont-panel h3 {font-size: 18px; padding-bottom: 20px;}
	.cont-panel p {font-size: 14px; line-height: 18px; padding-bottom: 20px;}
	.cont-panel img {width:100%;}
	.cont-panel a.button {padding: 10px 30px; font-size: 15px;}
	.cont-contain {padding: 20px 30px;}
	
	.left-logo {width: 140px; height:50px; float:left; margin-top:25px; background-size: 100%;}
    .right-logo {width: 140px; height: 50px; float: right; margin-top: 35px; background-size:100%;}
	.head-content {background-size:60%;}
	.cont-panel img {width:100%;}
	.content-left {max-width:100%; float:none;}
	.image-right {float:none; margin-top:30px; margin-bottom:30px}
	.image-left {float:none; margin-top:30px; margin-bottom:30px; margin-right:0%;}
	.content-right {max-width:100%; float:none; clear:both;}
	.cont-panel a.button {max-width:400px;}
	
	footer {padding: 0px 0px;}
	.foot-cont {padding-top: 30px; padding: 20px 20px 50px 20px; background-size: 40%; background-position: 50% bottom;}
	.foot-cont p {font-size:10px; line-height: 12px; padding-bottom: 10px; margin:0;}
	.foot-cont ul li {font-size:10px; line-height: 12px; margin:0;}	

    /* Welcome page ============================================================================================================================================================ */

    /* Main page title block */
    .heading-block                              {height:140px; padding:32px 24px;}

    /* Content box */
    .content-box__viewport                      {height:300px;}
    .content-box__buttons                       {flex-direction:column; justify-content:flex-start;}
    .content-box__button-set                    {flex:1 1 auto; padding:12px 8px;}

    /* Footer */
    FOOTER.site-footer                          {background-position:left 80%;}
    .footer-content                             {padding:20px 20px 180px;}
    NAV.footer__nav                             {bottom:20px; left:20px; right:20px; text-align:center; font-size:12px;}
}

@media (max-width:330px){
	.right-logo {width: 100px; height: 50px; float: right; margin-top: 35px; background-size:contain;}
	.cont-panel h2 {font-size: 20px;}
	.cont-panel a.button {font-size: 12px;
}
}
@media (min-width:1024px)	{	.wscrMainBackground.wscrPopup {		left:0 !important;	}}