@charset "UTF-8";

/*
Theme Name: Zilly Media
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Zilly Media is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zillymedia
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/* Categories 01 to 03 are the basics. */

/* Variables */
@import "assets/css/reset.css";

body {
	font: 12px/18px Arial, sans-serif;
	width: 100%;
	background: url('assets/img/body-bg.png') no-repeat center top;
}
.wrapper {
	width: 100%;
}
.block {
	width: 940px;
	margin: 0 auto;
	position: relative;
}


/* Header
-----------------------------------------------------------------------------*/
header {
	height: 240px;
}
header .logo {
	top: 20px;
	left: 0px;
	position: absolute;
}
header ul.myMenu {
	top: 0px;
	left: 210px;
	position: absolute;
	z-index: 99;
}
header ul.myMenu > li {
	display: inline-block;
	margin-right: 10px;
	float: left;
	width: 100px;
	padding: 30px 15px 5px;
	cursor: pointer;
}
header ul.myMenu > li:hover {
	background: white;
	height: 205px;
}
header ul.myMenu li a {
	font-family: 'Open Sans';
	font-weight: 700;
	color: #3a3a3a;
	text-decoration: none;
	font-size: 14px;
	text-transform: uppercase;
	padding-left: 12px;
	background: url('assets/img/menu-li.png') left center no-repeat;
}
header ul.sub-menu {
	display: none;
	padding-top: 15px;
}
header ul.myMenu li:hover ul.sub-menu {
	width: 200px;
	display: block;
}
header ul.sub-menu li {
	padding: 0 0 10px 0;
}
header ul.sub-menu li:hover {
	background: none;
}
header ul.sub-menu li a {
	background: none;
	font-family: 'Open Sans';
	font-weight: 600;
	text-transform: none;
	padding-left: 0px;
	max-width: 130px;
	display: inline-block;
}
header ul.sub-menu li a:hover {
	/*border-bottom: 1px solid;*/
	text-decoration: underline;
}
header button.sign_in {
	background: #ff7800;
	border: 0;
	font-family: 'Open Sans';
	font-weight: 700;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	width: 80px;
	height: 30px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
	position: absolute;
	right: 0px;
	top: 23px;
	line-height: 20px;
}
header button.sign_in:hover {
	background: #ff4d00;
}
header .lang {
	position: relative;
	background: url('assets/img/lang.png') 5px 10px no-repeat;
	padding-left: 20px;
	width: 37px;
	line-height: 28px;
	border: 2px solid white;
	display: block;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	height: 26px;
	font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 14px;
	position: absolute;
	right: 0px;
	top: 23px;
	cursor: pointer;
	  z-index: 99;
}
header .lang:hover {
	background: url('assets/img/lang-hover.png') 5px 10px no-repeat white;
	height: 110px;
	color: #3a3a3a;
	
}
header .lang a {
	color: #3a3a3a;
	text-decoration: none;
	line-height: 15px;
}
header .lang a:hover {
	border-bottom: 1px solid;
}
header .lang .sel {
	display: none;
	height: 50px;
}
header .lang:hover .sel {
	display: block;
}
header .text {
	width: 553px;
	height: 100px;
	position: absolute;
	left: 215px;
	top: 75px;
	font-family: 'Open Sans';
	font-weight: 700;
	color: #fff;
	font-size: 22px;
	text-transform: uppercase;
	text-align: center;
	line-height: 37px;
}
header .text span {
	display: block;
	color: #414dac;
	font-size: 20px;
}

header .soc {
	z-index: 98;
	position: absolute;
	right: 13px;
	top: 90px;
	cursor: pointer;
}
header .soc > img {
	opacity: 0.6;
}
header .soc:hover > img {
	opacity: 1;
}
header .soc .soc-bg {
	background: url('assets/img/soc-bg.png') no-repeat center top;
	padding-top: 12px;
	height: 205px;
	width: 62px;
	display: none;
	z-index: 9999;
	position: absolute;
	right: -11px;
	text-align: center;
}
header .soc:hover .soc-bg {
	display: block;
}
header .soc .soc-bg img {
	margin-top: 5px;
	opacity: 0.8;
}
header .soc .soc-bg img:hover {
	opacity: 1;
}


/* mySlider
-----------------------------------------------------------------------------*/
.mySlider {
	height: 385px;
}
.mySlider .affiliates {
	z-index: 9;
	position: absolute;
	top: 24px;
	left: 0px;
	background: url('assets/img/affiliates.png') no-repeat;
	width: 200px;
	height: 60px;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(124, 122, 122, 1);
	text-align: center;
	line-height: 59px;
}
.mySlider .advertisers {
	z-index: 9;
	position: absolute;
	top: 24px;
	right: 0px;
	background: url('assets/img/advertisers.png') no-repeat;
	width: 200px;
	height: 60px;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.61);
		font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(124, 122, 122, 1);
	text-align: center;
	line-height: 59px;
}
.mySlider .affiliates:hover,
.mySlider .advertisers:hover {
	background-position: 0px -60px;
}
.mySlider strong {
	font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 40px;
	text-transform: uppercase;
	display: block;
	line-height: 63px;
	margin-top: 20px;

}

.s_1,.s_2,.s_3,
.s1,.s2,.s3,
.s4,.s5,.s6,
.s7,.s8,.s9,
.s10,.s11,.s12 {
	display: none;
}
li.flex-active-slide .s_1,
li.flex-active-slide .s_2,
li.flex-active-slide .s_3,
li.flex-active-slide .s1,
li.flex-active-slide .s2,
li.flex-active-slide .s3,
li.flex-active-slide .s4,
li.flex-active-slide .s5,
li.flex-active-slide .s6,
li.flex-active-slide .s7,
li.flex-active-slide .s8,
li.flex-active-slide .s9,
li.flex-active-slide .s10,
li.flex-active-slide .s11,
li.flex-active-slide .s12 {
	display: block;
}



/* Middle
-----------------------------------------------------------------------------*/
.content {
	padding: 35px 0 50px 0;
	color: #333333;
	font-size: 18px;
	font-family: 'Open Sans';
	line-height: 34px;
}
.content h1 {
	font-weight: 700;
	color: #333333;
	font-size: 24px;
	text-transform: uppercase;
	line-height: 70px;
	text-align: center;
	margin-bottom: 20px;
}
.content h2 {
	font-weight: 700;
	color: #333333;
	font-size: 22px;
	text-transform: uppercase;
	line-height: 70px;
	
	margin-bottom: 20px;
}
.content strong{
	font-weight: 700;

}
.content p{
	margin-bottom: 20px;

}
.content .offers {
	display: block;
	margin: 35px auto;
	background: url('assets/img/offers.png') no-repeat;
	width: 200px;
	height: 60px;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(124, 122, 122, 1);
	text-align: center;
	line-height: 63px;
}
.content .offers:hover {
	background-position: 0px -60px;
}
.content ul.main {
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	text-align: center;
	list-style-type: disc;
	list-style-position: inside; 
}
.content ul.main span {
	color: #4855b5;
}


/* All
-----------------------------------------------------------------------------*/
.all {
	height: 429px;
	background: url('assets/img/all.png') no-repeat center top;
	font-family: 'Open Sans';
}
.all .kv {
	width: 470px;
	float: left;
	text-align: center;
	padding: 20px 0;
}
.all .kv  h3 {
	font-weight: 700;
	color: #fff;
	font-size: 24px;
	text-transform: uppercase;
	line-height: 70px;
	text-align: center;
}
.all .kv  span {
	display: block;
	font-weight: 600;
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	line-height: 35px;
	text-align: center;
}
.all .kv  span::before { 
    content: "\2022   ";
	font-size: 20px;
}
.all .kv  span::after { 
    content: "  \2022";
	font-size: 20px;
}
.all .kv  .aff {
	display: block;
	margin: 15px auto;
	background: url('assets/img/aff.png') no-repeat;
	width: 200px;
	height: 60px;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(124, 122, 122, 1);
	text-align: center;
	line-height: 61px;
}
.all .kv  .adv {
	display: block;
	margin: 15px auto;
	background: url('assets/img/adv.png') no-repeat;
	width: 200px;
	height: 60px;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(124, 122, 122, 1);
	text-align: center;
	line-height: 61px;
}
.all .kv  .aff:hover,
.all .kv  .adv:hover {
	background-position: 0px -60px;
}


/* Select
-----------------------------------------------------------------------------*/
.select {
	padding: 35px 0;
}
.select h2 {
	font-weight: 700;
	color: #333333;
	font-size: 24px;
	text-transform: uppercase;
	line-height: 50px;
	text-align: center;
	margin-bottom: 20px;
}

/* Kepp
-----------------------------------------------------------------------------*/
.keep {
	padding: 0 0 35px 0;
}
.keep h2 {
	font-weight: 700;
	color: #333333;
	font-size: 24px;
	text-transform: uppercase;
	line-height: 60px;
	text-align: center;
	margin-bottom: 20px;
}
.keep .ke {
	width: 240px;
	text-align: center;
	float: left;
}
.keep .ke h5 {
	font-weight: 700;
	color: #333333;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
}
.keep .ke span {
	font-weight: 500;
	color: #333333;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}
.keep .ke img {
	margin-top: 20px;
}
.keep .middle {
	margin: 0 110px;
}


/* People
-----------------------------------------------------------------------------*/
.people {
    width: 190px;
    float: left;
    margin: 25px 15px 25px 15px;
}
.people:first-of-type {
	margin-left: 0px;
}
.people:last-of-type {
	margin-right: 0px;
}
.people .icon {
	width: 190px;
	height: 190px;
	position: relative;
	overflow: hidden;
}
.people .icon .pod {
	background: url('assets/img/team.png') no-repeat top left;
	width: 190px;
	height: 190px;
	position: absolute;
	z-index: 999;
	left: 0px;
	right: 0px;
	
}
.people .icon .pod:hover {
	background-position: 0px -190px;
}
.people .icon img {
	position: absolute;
	top: 15px;
	left: 15px;
	max-width: 100%;
}
.people .name {
	font-family: 'Open Sans';
	color: #333;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
	font-weight: 700;
	line-height: 24px;
	margin-top: 30px;
	margin-bottom: 20px;
}
.people span {
	font-family: 'Open Sans';
	color: #333;
	font-size: 14px;
	text-transform: uppercase;
	text-align: center;
	font-weight: 600;
	line-height: 24px;
	display: block;
}
.people-divider {
	width: 140px;
    margin: 0;
	height: 10px;
	float: left;
}
.people-divider--less {
	width: 30px;
    margin: 0;
	height: 10px;
	float: left;
}
/* Footer
-----------------------------------------------------------------------------*/
footer {
	padding-top: 55px;
	height: 212px;
	background: url('assets/img/foot-bg.png') no-repeat center top;
	  margin-top: 50px;
}
footer ul.myFootMenu {

}
footer ul.myFootMenu li {
	float: left;
/* 	width: 160px; */
	width: 225px;
}
footer ul.myFootMenu li a {
	font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 14px;
}
footer ul.myFootMenu > li > a {
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
}	
footer ul.myFootMenu ul.sub-menu {
	margin-top: 20px;
}
footer ul.myFootMenu ul.sub-menu li {
	line-height: 23px;
}
footer ul.myFootMenu ul.sub-menu li a {
	text-decoration: none;
}
footer ul.myFootMenu ul.sub-menu li a:hover {
	border-bottom: 1px solid;
}
footer .right {
	width: 300px;
	position: absolute;
	top: 0px;
	right: 0px;
}
footer .right h5 {
	font-family: 'Open Sans';
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
	margin-bottom: 30px;
}
footer .right span {
	display: block;
	font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 14px;
	line-height: 23px;
	margin-top: 20px;
}
footer .right img {
	opacity: 0.7;
	margin-right: 18px;
}
footer .right img:hover {
	opacity: 1;
}

.ui-widget-overlay {
	background: black !Important;
	opacity: 0.7 !important;
}
.ui-widget-content {

  background: #e8e8e9 !important;
}
.ui-widget-header {
	border: 0 !important;
	background: 0 !important;
}
#dialog {
	padding: 10px 59px 20px;
	font-family: 'Open Sans';
	text-align: center;
	color: #3a3a3a;
	font-size: 16px;
}
#dialog input[type="text"],
#dialog input[type="password"]{
	border: 1px solid #b3b3b3;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	width: 279px;
	height: 50px;
	color: #3a3a3a;
	font-weight: 500;
	font-size: 18px;
	padding: 0 20px;
	margin-bottom: 40px;
}
#dialog input[type="submit"]{
	background: #ff7800;
	border: 0;
	font-family: 'Open Sans';
	font-weight: 700;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	width: 200px;
	height: 60px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
	border-bottom: 1px solid #b25400;
	line-height: 20px;
		-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.61);
}
#dialog input[type="submit"]:hover {
	background: #ff4d00;
}
#dialog a.l {
	color: #2b3377;
	font-size: 18px;
	font-weight: 600;
	font-family: 'Open Sans';
	text-decoration: none;
	border-bottom: 1px solid;
}
#dialog a.l:hover {
	border: 0;
}
#dialog h3 {
	color: #393939;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
}
.ui-state-default .ui-icon {
	background: url('assets/img/close.png') no-repeat !important;
	opacity: 0.7;
}
.ui-state-default .ui-icon:hover {
	opacity: 1;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  border: 0 !important;
 }
 .ui-dialog .ui-dialog-title {

  margin: 10px 0!important;
 }
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {

  background: 0 !important;
 }
 
.ui-dialog .ui-dialog-titlebar-close {
	height: 21px !important;

	margin-right: 5px !important;
}
#dialog .affiliates {
	display: block;
	background: url('assets/img/aff.png') no-repeat;
	width: 200px;
	height: 60px;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	margin: 20px auto;
	font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(124, 122, 122, 1);
	text-align: center;
	line-height: 61px;
}
#dialog .advertisers {
	display: block;
	background: url('assets/img/adv.png') no-repeat;
	width: 200px;
	height: 60px;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.61);
	margin: 20px auto;
	font-family: 'Open Sans';
	font-weight: 600;
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(124, 122, 122, 1);
	text-align: center;
	line-height: 61px;
}
#dialog .affiliates:hover,
#dialog .advertisers:hover {
	background-position: 0px -60px;
}


blockquote{
 display: block;  
 letter-spacing: 1px;
}

blockquote span {
	display: inline;
}	

.ngg-gallery-thumbnail img {
	border: 0 !important;
	margin: 0 !important;
	padding: 1px !important;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: url(grayscale.svg#greyscale);
	filter: gray;
}
.ngg-gallery-thumbnail img:hover {
  background: none !important;
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: none;
}
.ngg-gallery-thumbnail-box {
	margin: 0 !important;

	width: 33.33%;
}
.ngg-galleryoverview {

  margin-top: 40px !important;
 }
 
 tr td.l {
	  float: left;
	margin-top: -36px;
 }
  tr td.r {
	  float: right;
	
 }