/*
Theme Name: WWYB Theme
Author: Bryn Davies
Author URI: https://wwyb.co.uk
Description: Theme Styles for WWYB.
Version: 0.1
*/

/*

font-family: 'Open Sans', sans-serif; // Paragraph (300, 400, 700)
font-family: 'Oswald', sans-serif; // titles (300, 500, 700)
*/

body {
	margin:0;
	padding:0;
	background-color:#fffffe;
	color:#5c5b5b;
	font-family: 'Open Sans', sans-serif;
	font-size:18px;
}

h1,h2,h3,h4 {font-family: 'Oswald', sans-serif; font-weight:500;}

h1 {font-size: 35px; color: crimson; text-transform:uppercase;margin-top:0px;padding-top:10px;line-height:35px;}
h2 {font-size: 26px; color: crimson; line-height:29px;text-transform:uppercase;}
h3 {font-size: 22px; color: darkmagenta; line-height: 22px;text-transform:uppercase;}
h4 {font-size: 18px; color:#5c5b5b; line-height: 18px; text-transform:uppercase;}


p {line-height:24px;}
a {color:#5c5b5b;}

/* Header Content styling */
#headerWrap {width:100%; height:100px; text-align:center; height:auto; background-color:#000000; z-index:1000;position:fixed; top:0px; left:0px;}
#header {max-width:1400px; overflow: hidden;padding-top:10px;padding-bottom:10px;padding-left:20px; padding-right:20px; height:auto; display:block; margin:0 auto;position:relative;margin-bottom:0px;}
#Logo {float:left; position:relative; width:300px; height:auto;}

.sitelogo {color:#ffffff; text-align: left;font-size:30px; letter-spacing:normal;font-weight:300;margin-bottom: 17px;margin-top:5px;}
.sitelogo span {font-weight:500;}
/* Navigation Content styling */
#Nav {display:none; max-width: 1440px; margin: 0 auto; position: fixed; left: 0px; right: 0px;z-index:999;margin-top: -17px;}
#Nav ul {margin-left:0px; padding:20px;width:auto;background-color:#1e1e1e; float:right;}
#Nav ul li {display: block; font-size:17px;text-transform:uppercase;text-align:right;padding-top:4px; padding-bottom:4px; font-family: 'Oswald', sans-serif;}
#Nav ul li a {color:#ffffff; text-decoration:none!important; }
#Nav ul li:hover {}
#Nav ul li a:hover {}

.sub-menu { font-family: 'Open Sans', sans-serif!important;}
ul.sub-menu {}
ul.sub-menu li {}
ul.sub-menu li:hover {}
ul.sub-menu li a {}
ul.sub-menu li a:hover {}

#mobbut {display:block; position:absolute; right:20px; top:26px;width:37px; height:37px; cursor: pointer;z-index:11;}
#mobbut img {width:100%; height:auto;}


#videoModal {position:fixed; top:30px; left:10%; width:80%; height:auto;padding-top:25px; padding-bottom:25px; background-color:rgba(255,255,255,0.9);display:none; border-radius:10px; border:2px solid #ba774e;}
#videoPlayer {width:95%; margin:0 auto; text-align: center;margin-top:0px;position: relative; padding-bottom: 56.25%; /* 16:9 */height:0;}


.clVmodal {
width: 20px;
height: 20px;
background-color: #ffffff;
border-radius: 20px;
border: 2px solid #ba774e;
text-align: center;
font-size: 22px;
float: right;
padding: 8px;
margin-right: -15px;
margin-top: -43px;
padding-top: 6px;
cursor:pointer;
}

#videoPlayer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


#homeCarousel .slick-dots {
position: absolute;
top: 5px;
right:10px;
display: inline-flex;
padding: 10;
margin: 0;
list-style: inside;
text-align: right;
color:#fff;
font-size: 2em;
}

#homeCarousel .slick-dots button {display:none;}

/* Main Content styling */
section {width:100%; padding-top:25px; padding-bottom:25px;height:auto;}
#content {max-width:1400px; padding-left:20px; padding-right:20px; height:auto; display:block; overflow: hidden; margin:0 auto;}

.col25 {width:24.5%; display: inline-block;}
.col30 {width:29.5%; display: inline-block;}
.col35 {width:34.5%; display: inline-block;}
.col40 {width:39.5%; display: inline-block;}
.col50 {width:49.5%; display: inline-block;}
.col60 {width:59.5%; display: inline-block;}
.col65 {width:64.5%; display: inline-block;}
.col70 {width:69.5%; display: inline-block;}
.col75 {width:74.5%; display: inline-block;}
.col100 {width:99.5%; display: inline-block;}

#homeCarousel {}
#homeSlide {width:100%; height:650px; position:relative}
#homeCarousel .slick-slide img {/*object-fit: contain; object-position: right top;*/width:100%;}
#homeCarousel .slidetext {width:45%; font-size:22px; color:#ffffff;position:absolute; top:23%; left:5%; padding:20px; background-color:rgba(0,0,0,0.4);border-radius:15px;}
#homeCarousel .slidetext .theslidetext {display:block;}
#homeCarousel h1 {font-size:43px;}
.sliderbutton {
	padding: 6px 14px;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
		font-weight:700;
}

.sliderbutton a {color:crimson;}

#categoryCarousel {}
#categorySlide {}


/*POST STYLES*/

.listpost {}
.listpost h1 {margin-top:0px;padding-top:0px;}
.listtype {font-size:15px; font-weight:bold; text-transform: uppercase;margin-bottom:0px;padding-bottom:0px;}

.masonarycontainer {
	/*display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;*/
}

.productblock {padding:10px 20px; border-radius:8px;background-color:#ffffff; border:2px solid #5c5b5b;margin-bottom:20px;display: block;overflow:hidden;}
.productblock h2 {color:darkmagenta;margin-bottom:0px;}
.price {font-size:24px; color:crimson;padding:top:0px;margin-top:10px;margin-bottom:10px; font-weight:bold;}
.productblock .col30 {float:right;padding-top:17px;padding-left:5%;}
.productblock .col65 {float:left;}
.productblock img {width:100%;}

#productsliderno1 {width:100%; display:block;overflow:hidden;position:relative;}
#productsliderno1 img {width:100%;padding-bottom: 35px;}

#productsliderno2 {width:100%; display:block;overflow:hidden;position:relative;}
#productsliderno2 img {width:100%;padding-bottom: 35px;}

#productsliderno3 {width:100%; display:block;overflow:hidden;position:relative;}
#productsliderno3 img {width:100%;padding-bottom: 35px;}

#productsliderno4 {width:100%; display:block;overflow:hidden;position:relative;}
#productsliderno4 img {width:100%;padding-bottom: 35px;}

#productsliderno5 {width:100%; display:block;overflow:hidden;position:relative;}
#productsliderno5 img {width:100%;padding-bottom: 35px;}

#productsliderno5 .slick-dots,#productsliderno4 .slick-dots,#productsliderno3 .slick-dots, #productsliderno2 .slick-dots,#productsliderno1 .slick-dots{
position: absolute;
display: inline-flex;
padding: 5px;
margin: 0 auto;
list-style: inside;
color:darkmagenta;
bottom:5px;
max-width: 185px;
left: 0px;
right: 0px;
}
ul.slick-dots {margin:0 auto;background-color:#ffffff;}
ul.slick-dots li {padding-left:0px;padding-right:0px;}
.slick-dots button {display:none;}

.buynowbutton {background-color:crimson; color:#ffffff; padding:8px 20px; border-radius:5px; font-size:20px; font-weight:bold;text-decoration:none;}


/* Footer Content styling */
#footer {color:#fff;text-align:center; width:100%; padding-bottom: 30px;clear: both; height:auto; display:block; overflow: hidden; margin:0 auto; background-color: #000000;}
#footer a {color:#ffffff;}

#footer .sitelogo {color:#ffffff; text-align: center;font-size:30px; letter-spacing:normal;font-weight:300;margin-top:10px;}
#modal {display:none; z-index:4000;position:fixed; top:0px; left:0px; width:100%; height:100vh; background-color: rgba(0,0,0,0.8); text-align:center;justify-content: center;flex-direction: column;}
#closeModal {position:absolute;right:0px;}
#closeModal img {opacity:0.7;}
#closeModal img:hover {opacity:1;}

#cookiesmodal {display:none; z-index:4000;position:fixed; top:0px; left:0px; width:100%; height:100vh; background-color: rgba(0,0,0,0.8); text-align:center;justify-content: center;flex-direction: column;}
#cookiesetc {width:65%; display:block;height:auto;color:#868786; margin:0 auto; background-color: #fff;padding-bottom:70px;font-size:12px;position: relative;}



/* resposive media queries */
@media only screen and (max-width: 1024px) {
	#homeCarousel .slidetext {width:45%; font-size:22px; color:#ffffff;position:absolute; top:11%; left:5%; padding:20px; background-color:rgba(0,0,0,0.4);border-radius:15px;}
}

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

  #cookiesetc {width:85%; display:block;height:75vh; overflow:scroll;color:#868786; margin:0 auto; background-color: #fff;padding-bottom:70px;font-size:12px;position: relative;}

}

@media only screen and (max-width: 860px) {
#homeCarousel .slidetext .theslidetext {display:none;}
#homeCarousel .slidetext {width:83%; font-size:22px; color:#ffffff;position:absolute; top:15%; left:5%;}
}

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

	#homeCarousel .slidetext {width:83%; font-size:22px; color:#ffffff;position:absolute; top:5%; left:5%;}


}



@media only screen and (max-width: 600px) {
#homeCarousel h1 {font-size:30px;}

}


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


}