/*general */
html,body{width:100%;margin:0;padding:0;font-size:12px; font-weight:normal; direction:rtl;font-family:almoni-dl; overflow:hidden}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;margin:0;padding:0;} 
.clear {clear:both}
.sep {margin-bottom:30px} 
 #Gkidum {display:none}
ul,li {padding:0;margin:0;list-style:none}
#socialTop,#share {display:none}
a  {text-decoration:none;color:#000;}    

@font-face{
	font-family:'almoni-dl3';
	font-weight:300; /*(bold)*/
	font-style: normal;
	src: url('/Static/fonts/almoni/almoni-dl-aaa-300.eot'); 
	src: url('/Static/fonts/almoni/almoni-dl-aaa-300.eot?#iefix') format('embedded-opentype'), 
		url('/Static/fonts/almoni/almoni-dl-aaa-300.ttf') format('truetype'), 
		url('/Static/fonts/almoni/almoni-dl-aaa-300.woff') format('woff');
}

@font-face{
	font-family:'almoni-dl7';
	font-weight:700; /*(bold)*/
	font-style: normal;
	src: url('/Static/fonts/almoni/almoni-dl-aaa-700.eot'); 
	src: url('/Static/fonts/almoni/almoni-dl-aaa-700.eot?#iefix') format('embedded-opentype'), 
		url('/Static/fonts/almoni/almoni-dl-aaa-700.ttf') format('truetype'), 
		url('/Static/fonts/almoni/almoni-dl-aaa-700.woff') format('woff');
}

@font-face{
	font-family:'almoni-dl';
	font-weight:400; /*(regular)*/
	font-style: normal;
	src: url('/Static/fonts/almoni/almoni-dl-aaa-400.eot'); 
	src: url('/Static/fonts/almoni/almoni-dl-aaa-400.eot?#iefix') format('embedded-opentype'), 
		url('/Static/fonts/almoni/almoni-dl-aaa-400.ttf') format('truetype'), 
		url('/Static/fonts/almoni/almoni-dl-aaa-400.woff') format('woff');
}

@font-face {
  font-family: 'FontAwesome';
  src: url('/Static/fonts/FontAwesome/fontawesome-webfont.eot?v=4.0.3');
  src: url('/Static/fonts/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('/Static/fonts/FontAwesome/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('/Static/fonts/FontAwesome/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('/Static/fonts/FontAwesome/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#header {
 
    height:70px;
    width:100%;
    z-index:100;
    position:fixed;
    top:0;
}

/*html {
    background: url(http://wink.globes.co.il/images/gallery/2017/fjghjhgj8.jpg) no-repeat center center fixed;
    background-size: cover;
}*/

.categories {width:484px; float:right;position:relative;z-index:4; margin-right:1px; margin-top:-1px;}
 


.categories .category {   
    width: 160px;
    float: right;
    text-align: center;
    height: 158px;
 
    margin: 0 0 -1px -1px;
    background: #fff;
    border: 1px #888 solid;
}

 .categories .category:first-child span { display:none}
 #categories .category.active:first-child span { display:block}


 .categories .category:first-child img {margin-top:30px}

.categories .category img { width:115px; height:auto; margin-top:20px}
.categories .category span { font-size: 13px;
    color: #666;
    display: inline-block;
    width: 74%;
    margin-top: 15px;
    font-family: almoni-dl7;
    line-height: 15px;}


 
.categories .category.active img {display:none}

 
.categories .category.active span { font-size:22px;  margin: auto;
  position: absolute; transform: translate(-50%,-50%);top: 50%; left: 50%; font-family:almoni-dl7; line-height:22px}


.categories.open .category {position:relative}
.categories.open .category:after {  z-index:3;
    background: rgba(0, 0, 0, 0.3);
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    content:"";
    }
.categories .category.active:after  {position:static}


.compLogos {float: right;margin-top:-1px; position:relative; z-index:2 }
.compLogos div {   
    width: 159px;
    height: 160px;
    background: #fff;
    text-align: center;
    margin-bottom: -3px;
    border: 1px #888 solid;       
}
.compLogos img { width:100px; height:auto;}
.compLogos span {    
    display: block;
    font-size: 38px;
    font-family: almoni-dl7;
    padding-top: 10px; 

}
.compLogos.open .comp {position:relative;z-index:2}
.compLogos.open .comp:after {  
    z-index:3;
    background: rgba(0, 0, 0, 0.1);
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    content:"";
    }
.compLogos .comp.active:after  {position:static}
.compLogos .comp.active {background:#fff; border:1px #c00 solid; z-index:5;    margin-bottom: -1px; height: 158px;}
.compLogos .comp:hover {border:1px #c00 solid;}
 .compLogos.scrollator.open { position:relative; z-index:3}
 
.compInfo .mutag .tooltip img {width:23px;height:23px;vertical-align: middle;margin-left:5px}

#mainContent section.compInfo {display: none; width: 30%;    border: 1px solid #888;    float: right; background-color: white; display:none; font-family:almoni-dl;  margin-right:-1px; position:relative; z-index:2}
#mainContent section.compInfo .mutag{display: block;position : relative; text-align: center; padding:0 50px;}
#mainContent section.compInfo .mutag span.social{position: absolute; top: 20px; left:20px;}
#mainContent section.compInfo .mutag span.pos { display: block;  width: 100%;  font-size: 140px; line-height:140px}

    #mainContent section.compInfo .mutag span.pos.main {
        font-size: 60px;
        line-height: 60px;
        margin-top: 100px;
    }

#mainContent section.compInfo .mutag span.title{display: block;    width: 100%;    font-size: 33px;  line-height:33px;  font-weight: normal;    border-bottom :1px solid #c4bdbd; padding-bottom:20px}
#mainContent section.compInfo .mutag div.nText{display: block;    width: 100%;    font-size: 300%; font-size:16px;   font-weight: normal;   }

#header .logo { float:right; background:url(http://images.globes.co.il/Images/site2/mutagim/logo.svg) no-repeat 10px 15px;    width: 360px; height: 70px; }
#header span {
        color: #fff;
        float: right;
        margin-right: 20px;
        margin: 5px 20px 0 0;
        font-size: 48px;
        font-family: almoni-dl;
        font-weight: normal;
    }

#header { float:left}
#header h1 { color: #fff;
    float: right;
    margin-right: 20px;
    margin: 5px 25px 0px 0;
    font-size: 48px;
    font-family: almoni-dl7;
    font-weight: normal;}

.moreArtcl {text-align:right; width:80%; margin: 20px auto}
.moreArtcl div { font-size:19px;margin-bottom:20px;font-family:almoni-dl7}
.moreArtcl a { display:block; overflow:hidden;margin-bottom:20px;}
.moreArtcl span { font-size:19px; line-height:19px;  font-family:almoni-dl; }
.moreArtcl .toTagit {font-size:13px; margin-top:10px; text-decoration:underline; color:#666; font-family:arial}
.moreArtcl .toTagit:hover {color:#666}
.moreArtcl img {width:100px; height:auto; margin-left:20px; float:right}

#mainLogo { 
    width: calc(100% - 484px);
    position: fixed;
    left: 0;
    margin: 0 auto;
    text-align: center;
    top: 20%;
}
#mainLogo img { margin:0 auto; width:96%}
#mainLogo div p img {width:253px; height:22px}

[data-tooltip]{ padding-bottom:3px;cursor:help;position:relative;}
 [data-tooltip]:after{content:attr(data-tooltip);padding:10px 20px;color:#000;position:absolute;left:50%;width:200px;margin-bottom:5px;margin-left:-80px;bottom:150%;border-radius:2px;background:#ffe;text-align:center;box-shadow:3px 3px 10px 1px rgba(0,0,0,0.5);border:1px #666 solid;font-size:12px;line-height:18px;}
[data-tooltip]:after{visibility:hidden;opacity:0;pointer-events:none;}
[data-tooltip]:hover:after {visibility:visible;opacity:1;z-index:2}
.mText { margin:0 auto; width:80%; padding-top:20px}

#navPrev, #navNext{position:absolute;top:220px;cursor:pointer;font-size: 4em}        
#navNext{left:5%;}
#navPrev{right:5%}
 

.compInfo {direction:rtl; font-family:almoni-dl7;margin-top:-1px}
.compInfo p { margin:5px 0; font-size:17px; text-align:right;font-family:almoni-dl7; min-height:50px}
.compInfo p strong {font-size:40px; display:inline-block; width:100px; font-weight:normal;font-family:almoni-dl; float:right; margin:-10px 0 5px}
.compInfo .mText.wide p strong { width:150px}
.compInfo .mText .innertext { font-family:arial; font-size:16px; line-height:28px}
.compInfo table {width:100%; border-top:1px #c4bdbd  solid; border-bottom:1px #c4bdbd solid; padding:15px 0; margin:15px 0;}
.compInfo table td {text-align:right; width:100px; padding:0; font-size:17px; float:right}

.compInfo .social .fa-facebook img {width: 34px; height:34px; }
.compInfo .social  { position:absolute;top:30px;left:17px; width:38px; height:120px}
.compInfo .social span, .compInfo .social a {margin-bottom:5px}
.compInfo .social .whatsappBTN {display:none}

.facebookMain {position:fixed;left:10px; bottom:10px}
 
.facebookMain img {    width: 78px;  height: 75px; }
 

@media only screen and (min-width:1400px) {
    .categories {width:645px} 
     #mainLogo {width: calc(100% - 644px)}
} 
@media only screen and (min-width:1600px) {
    .categories {width:806px}
    #mainLogo {width: calc(100% - 805px)}
} 
@media only screen and (max-width:1200px) {
    .categories {width:323px} 
    #mainLogo {width: calc(100% - 322px)}
} 

/* ipad */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
        #mainContent section.compInfo {width:50% !important}
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
            #categories  {width:161px !important}
            #mainLogo { width: calc(100% - 161px);}
            #mainContent section.compInfo {width:55% !important}
            #header h1 { font-size:34px; margin-top:15px}
}

 

#mainContent {margin-top:70px}
.categories, .compLogos, .compInfo  {  overflow-y:scroll;}


@media only all and (min-height: 300px) {.categories,.compLogos,.compInfo { height: 310px; }}
@media only all and (min-height: 400px) {.categories,.compLogos,.compInfo { height: 410px; }}
@media only all and (min-height: 500px) {.categories,.compLogos,.compInfo { height: 510px; }}
@media only all and (min-height: 600px) {.categories,.compLogos,.compInfo { height: 610px; }}
@media only all and (min-height: 700px) {.categories,.compLogos,.compInfo  { height: 710px; }}
@media only all and (min-height: 800px) {.categories,.compLogos,.compInfo { height: 780px; }}
@media only all and (min-height: 900px) {.categories,.compLogos,.compInfo { height: 880px; }}
@media only all and (min-height: 1000px) {.categories,.compLogos,.compInfo { height: 1010px; }}
@media only all and (min-height: 1100px) {.categories,.compLogos,.compInfo { height: 1110px; }}
@media only all and (min-height: 1200px) {.categories,.compLogos,.compInfo { height: 1210px; }}
@media only all and (min-height: 1300px) {.categories,.compLogos,.compInfo { height: 1310px; }}
@media only all and (min-height: 1400px) {.categories,.compLogos,.compInfo { height: 1410px; }}
@media only all and (min-height: 1500px) {.categories,.compLogos,.compInfo { height: 1510px; }}
@media only all and (min-height: 1600px) {.categories,.compLogos,.compInfo { height: 1610px; }}
@media only all and (min-height: 1700px) {.categories,.compLogos,.compInfo { height: 1710px; }}
@media only all and (min-height: 1800px) {.categories,.compLogos,.compInfo { height: 1810px; }}







/*colors*/
#mainContent section.compInfo .mutag span.pos,
.compLogos span,
.categories .category:hover span, 
.categories .category.active span,
.moreArtcl a:hover,
.compInfo p strong { color:#c00} 
#header {background:#c00}
.categories .category.active,
.categories .category:hover {border:1px #c00 solid;  position: relative; z-index:2;}

/*red*/
.red #mainContent section.compInfo .mutag span.pos,
.red .compLogos span,
.red .categories .category:hover span, 
.red .categories .category.active span,
.red .compInfo p strong,
.red .moreArtcl a:hover,
.red .compInfo p strong { color:#c00} 
.red #header {background:#c00}
.red .categories .category.active {border:1px #c00 solid;}

/*green*/
.green #mainContent section.compInfo .mutag span.pos,
.green .compLogos span,
.green .categories .category:hover span,
.green .categories .category.active span,
.green .compInfo p strong,
.green .moreArtcl a:hover,
.greem .compInfo p strong { color:#698737} 
.green #header {background:#698737}
.green .categories .category.active {border:1px #698737 solid;}
 
/*blue*/
.blue #mainContent section.compInfo .mutag span.pos,
.blue .compLogos span,
.blue .categories .category:hover span, 
.blue .categories .category.active span,
.blue .compInfo p strong,
.blue .moreArtcl a:hover,
.blue .compInfo p strong  { color:#0089cf} 
.blue #header {background:#0089cf}
.blue .categories .category.active {border:1px #0089cf solid;}



/**
 * Scrollator jQuery Plugin
 * Scrollator is a jQuery-based replacement for the browsers scroll bar, which doesn't use any space.
 * version 1.1, July 3rd, 2014
 * by Ingi P. Jacobsen
 */
#scrollator_holder {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}

.scrollator {
	overflow: hidden !important;
}

.scrollator_lane_holder {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 15px;
	background-color: transparent;
	opacity: 0;
	-webkit-transition: width 200ms, opacity 200ms;
	-moz-transition:    width 200ms, opacity 200ms;
	-ms-transition:     width 200ms, opacity 200ms;
	-o-transition:      width 200ms, opacity 200ms;
	transition:         width 200ms, opacity 200ms;
}
.scrollator_lane {
	position: absolute;
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: rgba(64, 64, 64, 0);
	-webkit-transition: background 200ms;
	-moz-transition:    background 200ms;
	-ms-transition:     background 200ms;
	-o-transition:      background 200ms;
	transition:         background 200ms;
}

.scrollator_lane_holder.scrollator_on_body {
	position: fixed;
}

.scrollator_lane_holder.hover, 
.scrollator_lane_holder:hover {
	width: 21px;
}
.scrollator_lane_holder.hover > .scrollator_lane, 
.scrollator_lane_holder:hover > .scrollator_lane {
	background-color: rgba(64, 64, 64, 0.25);
}

.scrollator_handle_holder {
	position: absolute;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 -3px;
	width: 15px;
	background-color: transparent;
	-webkit-transition: width 200ms, height 100ms, top 100ms;
	-moz-transition:    width 200ms, height 100ms, top 100ms;
	-ms-transition:     width 200ms, height 100ms, top 100ms;
	-o-transition:      width 200ms, height 100ms, top 100ms;
	transition:         width 200ms, height 100ms, top 100ms;
}
.scrollator_handle {
	position: absolute;
	top: 0;
	right: 3px;
	bottom: 0;
	left: 3px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: rgba(64, 64, 64, 0.7);
}

.scrollator_lane_holder.hover .scrollator_handle_holder, 
.scrollator_lane_holder:hover .scrollator_handle_holder {
	width: 21px;
}



     #mainLogo div strong {display:block; margin-bottom:10px;font-family:almoni-dl7;font-size:21px;}
     #mainLogo div { font-size:19px;  line-height:18px; margin:20px auto 0; width:80%}
     #mainLogo img { width:80%}



/* mobile */
@media only all and (max-width: 480px) {
   
    .categories, .compLogos  { height:470px}
    .moreArtcl,.mText {width:100%}
    #mainContent section.compInfo .mutag {padding:0 5%}
    #mainLogo img {margin-bottom:10px}
    .compInfo.scrollator { height:auto; overflow-y:scroll!important; z-index:11111;  }
    .categories {width:100%; margin-top:380px}
    #mainLogo {width:100%; top:210px; left: 50%; transform: translate(-50%, -50%); position:absolute}
    #mainLogo div { font-size:14px}
    #mainLogo div p:last-child {width:80%; margin:0 auto}
    #mainLogo div p img { margin:0 auto; text-align:center; display:inline-block}
    #mainLogo div  strong {font-size:17px}
    .compInfo .social { display:none}
    .categories .category {width:33%}
    #header { height:60px; z-index:101}
    #mainContent { margin-top:50px}
   
    #header .logo { float:none; background:url(http://images.globes.co.il/Images/site2/mutagim/glogoS.png) no-repeat center 5px;  display:block; margin:0 auto; width:225px; height:35px }
    .categories.open {width:calc(80% - 162px); margin-top:0}
    .categories.open .category {width:100%;}
     .compLogos img, .categories .category img {width:75%; height:auto}
     #mainContent section.compInfo {top:60px; position:fixed;width:100% !important; z-index:10; overflow-y:scroll!important; height:94%;-webkit-overflow-scrolling:touch;}
     #navPrev, #navNext {top:100px; position:absolute;   z-index:1111; padding:10px}
    
     .fa.close {position: fixed;right: 0;top: 8px; z-index:22222222222222;display:none;background:url(http://images.globes.co.il/Images/site2/mutagim/back.svg) no-repeat 5px 8px;     width: 34px;  height: 44px;}
 
        #share { display: block; position: fixed; top: 10px; left: 13px; z-index: 1100000001;}
        #share img {width:28px}
     .compLogos {position:relative; z-index:100}
     .compInfo {position:relative; z-index:101!important;}
     .categories .category:first-child {background:#fff!important;}
     .categories .category:first-child img { display:block; width:100px!important;    margin:30px auto 0!important;}
    .categories, .compLogos, .compInfo  {  overflow-y:visible}
    [data-tooltip] {display:none}
    #mainContent {position:relative}
    #compLogos {position:absolute; top:0}
    .categories.open .category {width:33%;  }
    .categories.open {width:100%; position:fixed;}
 
    #header span {font-size: 20px; float:none; margin:0 auto; display:block;text-align:center; font-family:arial}
    #header h1 {  font-size: 24px;float:none; margin:0 auto; display:block; text-align:center; line-height:20px }
    html,body {overflow:visible}
    .fa-whatsapp   {  display:block}
    .fa-whatsapp img {width:33px; height:34px; }
    .facebookMain img { display:none}
     
   
    /*.facebookMain  {top: 8px; left:5px; bottom:auto; z-index:111}*/
    .whatsappMain   {  display:block; position:fixed; top: 6px; left:45px; z-index:111 }

    #mainContent .categories .category.active img {display:inline-block !important}
    #mainContent .categories .category.active span {font-size: 16px;margin-top: 40px;line-height: 16px;}
    #mainContent .categories .category.active:after {position:absolute !important}

    #mainContent section.compInfo .mutag img { vertical-align:top; max-height:130px}
	#mainContent section.compInfo .mutag span.pos { display: inline;  width:auto; font-size:75px; line-height:115px; float:right}

    #socialTop { width:50px; top:65px; height:140px;  left:0; position:fixed; z-index:1111}
    #socialTop a, #socialTop span {    position: static!important;
    margin: 5px auto 10px;    text-align: center;    display: block;}

 
    #socialTop .tw { display:block}
    .compInfo .social .fa-facebook img {width:34px; height: 34px;}
    .compInfo .social .fa-facebook,.fa-whatsapp, .compInfo .social .tw  {position: static; display:inline-block; }
    .mText {padding-top:0}
    #mainContent section.compInfo .mutag span.title {    border-top: 1px solid #c4bdbd; border-bottom:0; text-align:right;margin-top:20px; padding-top:10px}
    .categories .category,
    .compLogos div, 
    #mainContent section.compInfo { border: 1px #bbb solid;} 


    .compLogos span {float:right; margin:10px 20px}
    .compLogos div {width:100%; height:100px !important}
    #compLogos { width:85% !important}
    .compLogos img {width:30%; margin-top:10px}
    #compLogos {height:0}
    .categories .category span {  width:84%;  font-size: 16px;
     margin-top: 25px;
    line-height: 16px;}



#Gkidum {background: #121212; margin:0; position:fixed; z-index:10; display:block; height:60px; z-index:1111111111 ; bottom:0; width:100%}

#kidumLinks {
    width: 315px !important;
    text-align: right;
direction: rtl;
overflow: hidden;
margin:0 auto;
height:65px;
background: #121212;
}
#Gkidum .text { clear:both;  margin:0 auto; text-align:center; background:#000; padding-bottom:10px}
#Gkidum .text a {font-size:17px; color:#fff;}
#Gkidum .bText { clear:both;  margin:0 auto; text-align:center; background:#000; padding-top:20px;font-size:15px; color:#fff; font-family:Arial; }
#kidumLinks p {
    float:right;
color: #C2C2C2;
font-family: almoni-dl7;
    font-size: 17px;
    margin: 12px 15px 0 10px;
    width: 130px;
    text-align: right;
}
#kidumLinks p:before{content:"\f09e";font-family: fontawesome;font-size: 19px;color: #C2C2C2;  margin:4px 0 0 15px; float:right}
    #kidumLinks .kidumLinksItems a { background-image:url(http://images.globes.co.il/images/g40/kidumLm.png);  display:inline-block; height:56px; width:50px; margin-top:5px}
    #kidumLinks .kidumLinksItems a.instagram {background-position: -234px 0}
    #kidumLinks .kidumLinksItems a.twitter {background-position: -40px 0}
    #kidumLinks .kidumLinksItems a.facebook {background-position: 8px 0}




    }

 

@media only all and (max-width: 480px)  and (min-height: 568px) {.categories,.compLogos,.compInfo { height: 480px; }}

@media only all and (max-width: 480px)  and (min-height: 667px) {.categories,.compLogos,.compInfo { height: 580px; }}

@media only all and (max-width: 480px)  and (min-height: 736px) {.categories,.compLogos,.compInfo { height: 640px; }}

 @media screen and (device-aspect-ratio: 40/71) {
    .categories .category:first-child img {
        width: 80px !important;
    }
}