/**
 * Custom CSS
 * Use this file to override styles if you feel uncomfortable editing
 * component stylesheets.
 ============================================================================ */
body {}

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

html {
  background-color: #fff;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

/* --------------------------------------------*/

/*branding */

.site-branding {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: absolute;
    z-index: 150;
}

#rid-header-first {position: relative;
    width: 100%;
    margin: auto;
}

#logowit {width: 300px;
margin: auto;}

#logowit img {
max-width: 300px; 
height: auto; 
margin-top: 150px;
position: absolute;}



.site-branding__logo-img 
    {width: 250px; height: auto;
margin-left: 50px;}

/* --------------------------------------------*/

/*menubalk*/

#rid-navbar {height: 80px;
background-color: #666;
border-bottom-color: #d6ac03;
border-bottom-style: solid;
border-bottom-widht: thick;
top: 0;
position: fixed;
z-index: 100;}

#block-brugsepetanqueclub {margin-top: 20px;
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;}

ul.sf-menu.sf-style-white li:hover, ul.sf-menu.sf-style-white li.sfHover, ul.sf-menu.sf-style-white a:focus, ul.sf-menu.sf-style-white a:hover, ul.sf-menu.sf-style-white span.nolink:hover {background: #666; color: #fff;
text-decoration: none;}

ul li.sf-depth-1 a:hover {
    outline: 0;
    animation-duration: 1s;
    animation-name: buttontransition;
    opacity: 0.6;
}

ul.sf-menu.sf-horizontal.sf-shadow ul, ul.sf-menu.sf-vertical.sf-shadow ul, ul.sf-menu.sf-navbar.sf-shadow ul ul {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

ul li.sf-depth-2 a:hover {
    outline: 0;
    animation-duration: 1s;
    animation-name: buttontransition;
    opacity: 1;
   
}

ul.sf-menu.sf-style-white a, ul.sf-menu.sf-style-white a:visited, ul.sf-menu.sf-style-white span.nolink {
    border: 0 none;
    color: #d6ac03;
    padding: 0.75em 1em;
}
ul.sf-menu.sf-style-white li, ul.sf-menu.sf-style-white.sf-navbar {
    background: none;
}

/* --------------------------------------------*/
/*socmed*/

#block-socmed {width: 150px;
float: right;
z-index: 100;}



.buttonsmall {float: left;}



#facebook {
    height: 30px;
    opacity: 1;
    width: 30px;
	float: left;
	margin-left: 5px;
}
#facebook img:hover {
    animation-duration: 1s;
    animation-name: buttontransition;
    height: 30px;
    opacity: 0.2;
    width: 30px;
}

#instagram {
    height: 30px;
    opacity: 1;
    width: 30px;
	float: left;
	margin-left: 5px;
}
#instagram img:hover {
    animation-duration: 1s;
    animation-name: buttontransition;
    height: 30px;
    opacity: 0.2;
    width: 30px;
}


#mail {
    height: 30px;
    opacity: 1;
    width: 30px;
	float: left;
	margin-left: 5px;
}
#mail img:hover {
    animation-duration: 1s;
    animation-name: buttontransition;
    height: 30px;
    opacity: 0.2;
    width: 30px;
}

#tel {
    height: 30px;
    opacity: 1;
    width: 30px;
	float: left;
	margin-left: 5px;
}
#tel img:hover {
    animation-duration: 1s;
    animation-name: buttontransition;
    height: 30px;
    opacity: 0.2;
    width: 30px;
}	
/* --------------------------------------------*/

/*video*/

#leaderboard {position: fixed;
top: 0;
left: 0;
width: 100%;
    z-index:-1;
}

#gifback {display: none;}

/*
#videoback {
    postion: fixed;
    z-index: -1;}


#videoback { position: fixed;
scale: 1;  
}


video {
    position: relative;
    width: 100vw;
    background-color: transparent!important;
    display: flex;
align-items: center;
justify-content: center;
    overflow: hidden;
}
*/

.l-r {
    flex: 0 0 auto;
    padding: 0px;

}



.l-rw {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: none;
    width: 100%;
    padding: 0px;
}



.pr-header {
color: #000;
background-color: transparent;
}

.page {
    background-color: 
    transparent;
}

.regions {
     background-color: 
    transparent;
}

/* --------------------------------------------*/

/* inhoud */

.node {
    background-color: #ffffff;
    -webkit-box-shadow: none;
    box-shadow: none;
}



#main-content {
    position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #fff;
padding-bottom: 20%;}

p {font-size: 0.8em;
color: #666;
line-height: 1.4em;}

.node ul li {font-size: 0.8em;
color: #666;
line-height: 1.4em;}

h1 {color: #d6ac03;
font-size: 2em;
font-weight: bolder;
margin-top: 10px;}

#block-lybaert-content {max-width: 1600px;;
    width: 90%;
    position: relative;
margin-left: auto;
margin-right: auto;
}

#block-lybaert-page-title {width: 90%;
margin: auto;}

#rid-content {max-width: 1600px;;
    width: 90%;
    position: relative;
margin-left: auto;
margin-right: auto;
}

.adres {color: #666;
text-align: center;}

/* block tansport */
#block-transport h2 {color: #666;
font-size: 2em;
font-weight: bolder;
max-width: 900px;
margin-left: auto;
margin-right: auto;
text-align: center;}

#block-transport p {text-align: center;}

/* openingsuren*/
#block-views-block-openingsuren-block-1 {
float: right;
width: 300px;
z-index: 1 !important;
position: relative;
    margin-right: 100px;
    background-color: none;
    padding: 15px;
    color: #d6ac03;
    font-size: 0.9em;
    border-left-color: #ccc;
    border-left-style: dotted;
    border-left-width: thin;
}

#block-views-block-openingsuren-block-1 h3 {font-size: 1.4em; font-weight: bolder;
color: #666;}

.office-hours-status {font-style: normal;
font-weight: bolder;
color: #d6ac03;}

.office-hours__item-label {font-weight: normal;}

/* block adresgegvens */

#block-depannagelybaertgent {
    max-width: 1600px;
    width: 90%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.node {
    margin-bottom: 1.25em;
    padding: 0px;
    border-radius: 2px;
}

/* --------------------------------------------*/
/*homeknoppen*/
.homebuttons {
  width: 100%;
    height: 300px;
  margin: 10px auto;
  position: relative;
  text-align:center;
left: 0;
 margin-top: 30%;
    padding-bottom: 20%;
 }

.homebuttons .homebutton {
  height: 250px;
  width: 250px;
  display:inline-block;
  margin: 20px;
    vertical-align: top;
   background-color: rgba(0,0,0,0.20);
border-radius: 50%;
    padding: 10px;
    padding-top: 50px;
    border-color: #d6ac03;
    border-width: medium;
    border-style: solid;
}
.homebutton h2 {color: #fff;
font-size: 1.2em;
    margin-top: 15px;
    font-weight: bolder;
    height: 30px;
}

.homebutton h2 a {color: #fff;}
.homebutton h2 a:link {color: #fff; text-decoration: none;}
.homebutton h2 a:hover {color: #ccc; text-decoration: none;}

.homebutton p {color: #fff;
font-size: 0.8em;
    margin-top: 10px;
    line-height: 1.2em;
}
.homebutton p a {color: #fff;}
.homebutton p a:link {color: #fff; text-decoration: none;}
.homebutton p a:hover {color: #ccc; text-decoration: none;}

.views-field-field-homeknop-afbeelding img:hover {  
    animation-duration: 1s;
    animation-name: buttontransition;
    opacity: 0.6;}

/* transportbuttons */

.transportbuttons {
  width: 100%;
  margin: 10px auto;
  position: relative;
  text-align:center;
left: 0;
    margin-top: 40px;
 }

.transportbuttons .transportbutton {
  height: 250px;
  width: 250px;
  display:inline-block;
  margin: 20px;
    vertical-align: top;
       background-color: #666;
border-radius: 10px;
    padding: 10px;
    padding-top: 20px;
}


.transportbutton h2 {color: #d6ac03;
font-size: 1.2em;
    margin-top: 15px;
    font-weight: bolder;
    height: 30px;
}

.transportbutton h2 a {color: #d6ac03;}
.transportbutton h2 a:link {color: #d6ac03; text-decoration: none;}
.transportbutton h2 a:hover {color: #fff; text-decoration: none;}

.transportbutton p {color: #fff;
font-size: 0.8em;
    margin-top: 10px;
    line-height: 1.2em;
}
.transportbutton p a {color: #fff;}
.transportbutton p a:link {color: #fff; text-decoration: none;}
.transportbutton p a:hover {color: #ccc; text-decoration: none;}


/* personen */

.personen {
  width: 100%;
  margin: 10px auto;
  position: relative;
  text-align:center;
 }

.personen .persoon {
  height: 600px;
  width: 200px;
  display:inline-block;
  margin: 10px;
 vertical-align: top;
}
.personen h2 {font-size: 1.2em; color: #d6ac03;}
.personen h3 {font-size: 0.8em; color: #666; font-weight: bolder;}

.views-field-field-gegevens {margin-top: 20px;}

#block-brugsepetanque-page-title {text-align: center;}

/*fotoboeken */

.field-name-field-fotoboek {
 width: 100%;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

.field-name-field-fotoboek figure {
  height: 200px;
  width: 200px;
  display:inline-block;
  margin: 10px;
}	
	

.field-node--field-foto {
 width: 100%;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

.field-node--field-foto figure {
  height: 200px;
  width: 200px;
  display:inline-block;
  margin: 10px;
}	

/* sponsors */

.sponsors {
    margin-top: 100px;
    border-top-color: #CCC;
    border-top-style: dotted;
    border-top-width: thin;
    padding-top: 25px;
  width: 100%;
  margin: 10px auto;
  position: relative;
  text-align:center;
 }

.sponsors .sponsor {
  height: 150px;
  width: 150px;
  display:inline-block;
  margin: 10px;
 vertical-align: top;
}

/* --------------------------------------------*/
/* flexslider */
.flexslider {
    margin: 0 0 60px;
    background: #fff;
    border: none;
    position: relative;
    zoom: 1;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

/* flexslider home */

  .phonefotos {display: none;}
    .homefotos {display: block;}


/* --------------------------------------------*/
/* forms */

#webform-submission-transport-add-form {font-size: 0.8em;}

.form-text {font-size: 10px; color: #d6ac03;}
.form-number {font-size: 10px; color: #d6ac03;}
.form-email {font-size: 10px; color: #d6ac03;}
.form-tel {font-size: 10px; color: #d6ac03;}
.form-select {
        font-size: 10px;
        text-transform: uppercase; 
        color: #d6ac03;}

.form-type-radio label.option, .form-type-checkbox label.option {
    border-color: none;
    background-color: #ffffff;
    font-size: 0.8em;
    color: #d6ac03;
}

.form-type-select__select-wrapper:not(.is-multiple) .form-select {color: #333c;}

#edit-voertuig-items-0-vrachtwagen-afbeelding-upload {font-size: 10px; color: #d6ac03;
padding-top: 5px;}

#edit-voertuig-items-0-vrachtwagen-afbeelding-upload input {padding: 3px;}

#edit-particulier-zakelijk-keuze--wrapper {
    border-top-color: #ccc;
    border-top-style: dotted;
    border-top-width: thin;
    padding-top: 10px;
}


.fieldset-legend {
    color: #666;
    font-size: 1.2em;
    font-weight: bolder;

}

.tabledrag-toggle-weight {display: none;}
table {border: none;
    width: 100%;
}

td, th {
    border:none ;
}
tr {border-color: #eee;
}
a.tabledrag-handle .handle {
    height: auto;
    margin: -0.2em 0.5em 0;
    width: 20px;
}

td a:link{color: #666;}

/* personenwagens */

#webform-submission-transport-add-form table th:nth-child(1) { width: 2%;}
#webform-submission-transport-add-form table th:nth-child(2) { width: 10%;}
#webform-submission-transport-add-form table th:nth-child(3) { width: 10%;}
#webform-submission-transport-add-form table th:nth-child(4) { width: 10%;}
#webform-submission-transport-add-form table th:nth-child(5) { width: 10%;}
#webform-submission-transport-add-form table th:nth-child(6) { width: 13%;}
#webform-submission-transport-add-form table th:nth-child(7) { width: 20%;}
#webform-submission-transport-add-form table th:nth-child(8) { width: 20%;}


/* vrachtwagens */
#webform-submission-aanvragen-offerte-vrachtwagens-add-form table th:nth-child(1) { width: 2%;}
#webform-submission-aanvragen-offerte-vrachtwagens-add-form table th:nth-child(2) { width: 7%;}
#webform-submission-aanvragen-offerte-vrachtwagens-add-form table th:nth-child(3) { width: 7%;}
#webform-submission-aanvragen-offerte-vrachtwagens-add-form table th:nth-child(4) { width: 10%;}
#webform-submission-aanvragen-offerte-vrachtwagens-add-form table th:nth-child(5) { width: 10%;}
#webform-submission-aanvragen-offerte-vrachtwagens-add-form table th:nth-child(6) { width: 10%;}
#webform-submission-aanvragen-offerte-vrachtwagens-add-form table th:nth-child(7) { width: 14%;}
#webform-submission-aanvragen-offerte-vrachtwagens-add-form table th:nth-child(8) { width: 14%;}
#webform-submission-aanvragen-offerte-vrachtwagens-add-form table th:nth-child(9) { width: 10%;}
#webform-submission-aanvragen-offerte-vrachtwagens-add-form table th:nth-child(10) { width: 12%;}

/* machines */
#webform-submission-aanvragen-offerte-machines-add-form table th:nth-child(1) { width: 2%;}
#webform-submission-aanvragen-offerte-machines-add-form table th:nth-child(2) { width: 15%;}
#webform-submission-aanvragen-offerte-machines-add-form table th:nth-child(3) { width: 15%;}
#webform-submission-aanvragen-offerte-machines-add-form table th:nth-child(4) { width: 15%;}
#webform-submission-aanvragen-offerte-machines-add-form table th:nth-child(5) { width: 15%;}
#webform-submission-aanvragen-offerte-machines-add-form table th:nth-child(6) { width: 15%;}
#webform-submission-aanvragen-offerte-machines-add-form table th:nth-child(7) { width: 15%;}


th {background-color: #666;
color: #fff;
font-size: 11px;}

.field-suffix {display: none;}

.webform-multiple-add {padding-top: 10px;}


.veldgroeptitelsubtitel {font-size: 0.8em;
color: #d6ac03;}

#edit-voertuig-items-0-vrachtwagen-afbeelding--description {display: none;}

#voorwaarden {
    margin-left: 25px;
    margin-top: -39px;
    font-size: 0.8em;
    color: #d6ac03;
}

#voorwaarden a:link {color: #d6ac03;}
#voorwaarden a:visited {color: #d6ac03;}
#voorwaarden a:hover {color: #666; text-decoration: none;}
#voorwaarden a:active {color: #d6ac03;}

.button {background-color: #666;
text-transform: uppercase;
font-size: 0.8em;}

.button:hover {background-color: #d6ac03;}

#webform-submission-aanvragen-offerte-machines-add-form td { width: auto;}

.webform-confirmation__back  {
	background: url('http://depannage-lybaert.corpus-studio.be/pijl.png');
	background-size: contain;
	padding-left: 25px !important;
	background-repeat: no-repeat;
	}

.webform-confirmation__back a:link {color: #d6ac03;}
.webform-confirmation__back a:visited {color: #d6ac03;}
.webform-confirmation__back a:hover {color: #666; text-decoration: none;}
.webform-confirmation__back a:active {color: #d6ac03;}




/* --------------------------------------------*/
/* uitzetten melding adaptivethemes.com */

.attribution__link {display: none;}

/* --------------------------------------------*/
/*FOOTER */

#footer {position: fixed;
width: 100%;
    bottom: 0;
    background-color: #666;
    border-top-color: #d6ac03;
    border-top-style: solid;
    border-top-width: thick;
    z-index: 3 !important;
}

.pr-footer {color: #fff;
background-color: transparent;
    border-top-color: #eee;
    border-top-style: solid;
    border-top-width: thin;
    padding-left: 50px;
}

.block {margin: 0px}
#block-brugsepetanque-footer-menu ul { margin-left: 15px;}

#block-brugsepetanque-footer-menu ul li { font-size: 0.8em;}

#block-brugsepetanque-footer-menu ul li:link { color: #fff;}
#block-brugsepetanque-footer-menu ul li:hover { color: #ccc;}

.pr-footer__footer .menu-level-1 .menu__item {
    margin: 0.625rem 1rem 0.625rem 0;
    list-style: none;
    color: #fff;
}

/*waarborg*/
#edit-waarborg-text ul li {font-size: 0.8em;
color: #d6ac03;
list-style: square;}

/* --------------------------------------------*/


@media only screen and (max-width: 2300px) {
 #leaderboard {width: 100%;
    height: auto;}
}

/* --------------------------------------------*/




@media only screen and (max-width: 1820px) {
 /* #videoback {
    scale: 2;
}
    */
}

/* --------------------------------------------*/



@media only screen and (max-width: 1520px) {
 #leaderboard {width: 100%;
    height: auto;}
    
.site-branding {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: absolute;
    z-index: 150;
    margin-top: 78px;
}
    
    .site-branding__logo-img {
    width: 150px;
    height: auto;
}
    
 #logowit {
    width: 150px;
    margin: auto;
}
    #logowit img {
    max-width: 150px;
    height: auto;
    margin-top: 150px;
    position: absolute;
}
}

/* --------------------------------------------*/


@media only screen and (max-width: 1100px) {

    
#leaderboard {width: 150%;
    height: auto;}
    

    #block-logowit {width: 200px;
margin: auto;}
    


   
    
    .homebuttons {
  width: 100%;
    height: 150px;
  margin: 10px auto;
  position: relative;
  text-align:center;
left: 0;
 margin-top: 50%;
    padding-bottom: 80%;
 }

.homebuttons .homebutton {
  height: 150px;
  width: 150px;
  display:inline-block;
  margin: 20px;
    vertical-align: top;
   background-color: rgba(0,0,0,0.20);
border-radius: 50%;
    padding: 10px;
    padding-top: 5px;
    border-color: #d6ac03;
    border-width: medium;
    border-style: solid;
}
.homebutton h2 {color: #fff;
font-size: 0.8em;
    margin-top: 5px;
    font-weight: bolder;
    height: 30px;
}
 
}




/* --------------------------------------------*/

@media only screen and (max-width: 770px) {
    

    
    
#leaderboard {width: 300%;
    height: auto;}
    #block-socmed {
        margin-top: -30px;
}
      .homebuttons {
    padding-bottom: 150%;
 } 
    
.site-branding {
    position: absolute;
    z-index: 100;
    margin-top: 100px;
}  

.site-branding__logo-img {
    width: 150px;
    height: auto;
}
    
#block-views-block-openingsuren-block-1 {
float: none;
width: 85%;  
border-left-color: none;
border-left-style: none;
border-left-width: none;
border-top-color: #ccc;
border-top-style: dotted;
border-top-width: thin;
border-bottom-color: #ccc;
border-bottom-style: dotted;
border-bottom-width: thin;
margin-left: auto;
    margin-right: auto;
    }
    
    /* superfish menu */
    
    
    div.sf-accordion-toggle.sf-style-white a {
    background: #666;
    border: none;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    padding: 1em 3em 1em 1em;
    position: relative;
    
}
    
    div.sf-accordion-toggle.sf-style-white a.sf-expanded, ul.sf-menu.sf-style-white.sf-accordion li.sf-expanded {
    background: #d6ac03;
        width: 90%;
}
    
    .sf-accordion-toggle {}
    #block-lybaert ul li:first-child {display: none;}
    
  #block-brugsepetanque-socmed {
    float: right;
    margin-top: -0px;
    padding-right: 15px;
    position: absolute;
    right: 10px !important;
}  
 
}

@media only screen and (max-width: 764px){

ul.sf-menu.sf-style-white a, ul.sf-menu.sf-style-white a:link, ul.sf-menu.sf-style-white span.nolink {
    border: 0 none;
    background-color: #fff;
    padding: 0.75em 1em;
}
    
}



/* --------------------------------------------*/

@media only screen and (max-width: 570px) {

#leaderboard {width: 300%;
    height: auto;
    margin-left: -50%;}
    
    
    
.phonefotos {display: block;}
   
     /*
 
    #videoback { display: block;
    height: 700px;}
   
    #gifback {display: block;
    width: 100%;
    height: auto;
    background: url('http://depannage-lybaert.corpus-studio.be/auto.jpg');
    background-size: cover;}
    #gifback img {width: 100%; height: auto;}
    */
 
    
  .homebuttons {
    padding-bottom: 210%;
 } 
    
#block-logowit {width: 150px;
margin: auto;
    padding-bottom: 50px;}
    
 #block-logowit img {
    max-width: 150px;
    height: auto;
    margin-top: 100px;
    position: absolute;
}
 
   
    .sliders {margin-top: 59px;}
  
    
    .site-branding__logo-img {
    width: 120px;
    height: auto;
}
    
    
    #block-lybaert {
    margin-left: 0px;
    font-size: 0.8em;
        z-index: 400;
}
    
.homebuttons {
 margin-top: 70%;
 }
    
 #footer {position: absolute;}
    
}

@media only screen and (max-width: 432px) {

  #block-brugsepetanque-socmed {
    float: right;
    margin-top: -30px;
    padding-right: 15px;
    position: absolute;
    right: 10px !important;
}  
 #leaderboard {width: 350%;
    height: auto;
    margin-left: -70%;
}
}
    
@media only screen and (max-width: 400px) {
    


        
#block-logowit {width: 150px;
margin: auto;
    padding-bottom: 80px;}
        
 .homebuttons {
    
     margin-top: 80%;
 } 
    
    h1 {
    color: #d6ac03;
    font-size: 1.5em;
    font-weight: bolder;
}
    
    td {font-size: 0.8em;}

    
}




@media only screen and (max-width: 330px) {
    
#leaderboard {width: 350%;
    height: auto;
    margin-left: -100%;}
    
    .homebuttons {
 margin-top: 100%;
 }
   
    
}

/*
@media (min-aspect-ratio: 16/9) {
    #leaderboard {width: 100%;
    height: auto;}
}

@media (max-aspect-ratio: 16/9) {
    #leaderboard {width: 200%;
    height: 150%;}
}
/*

@media (max-width: 767px) {
    #leaderboard { display: none;}
    body { background: url('http://depannage-lybaert.corpus-studio.be/auto.jpg');
    background-size: cover;}
}