/*   
Theme Name: Ilyes Griyeb
Theme URI: http://www.ilyesgriyeb.ma
Description: New Ilyes Griyeb's website
Author: Fahd Idaghdour
Author URI: http://fahdos.com
Version: 1.0
*/


/* ==========================================================================
   Reset
   ========================================================================== */

* { padding: 0;margin: 0; box-sizing: border-box;}
html {height: 100%;font-family: sans-serif;  -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block;}
audio, canvas, progress, video {display: inline-block; vertical-align: baseline; }

[hidden], template {display: none;}

a {background: transparent;text-decoration: none;transition: all 200ms ease-out;color: #000;}
a:active, a:hover {color: #000; text-decoration:  underline;  outline: 0;  transition: all 200ms ease-out;}
ul {list-style: none;}
abbr[title] {border-bottom: 1px dotted;}
b, strong {font-weight: bold;}
img {border: 0;}
button {overflow: visible;}
button, select {text-transform: none;}
button, html input[type="button"],  input[type="reset"], input[type="submit"] { -webkit-appearance: button;  cursor: pointer; }
button[disabled],
html input[disabled] {cursor: default;}
button::-moz-focus-inner,
input::-moz-focus-inner {border: 0; padding: 0;}
input {line-height: normal;}
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
textarea {overflow: auto;}
textarea, input { outline: none; }
table { border-collapse: collapse;border-spacing: 0;}
td, th {padding: 0;}
p { margin-bottom: 20px;}
fieldset { border: none;}
button:focus {outline:0;}

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

/* ==========================================================================
   ========================================================================== */
body {font-family: Times, serif; font-weight:400; font-size: 13px; }
.row {  width: 100%;  margin: 0 auto;  max-width: 1200px;  padding: 0 5px;}
section { width: 100%; float: left; padding: 0 20px; }

.header {text-transform:  uppercase; padding: 20px 20px; }
.header .logo { width: 250px; display: inline-block;}
.header .msg {width: 210px; display: block; position: absolute; top: 84px; left: 20px; text-transform: initial; font-size: 20px;}
.header .msg span {font-family:Arial, Helvetica, sans-serif; }
.header .logo span {display: block;}
.header .menu {float: right; display: flex; }
.header .menu nav {margin-right: 100px;}
.header .menu nav ul {margin-top: 30px;}
.header .menu nav ul img {position: absolute; bottom: 20px; left: 20px;width: auto; height: auto; max-height: 40vh; max-width: 100%;border:  6px solid #F3EEF2; display: none;}
.header .menu nav ul li:hover img {display: block;}
.header .menu nav ul li {margin-bottom: 2px;}
.header a:hover {text-decoration: underline;}
.back {float: right;}
.header .back2 {display: none;}

.header .head {width: calc(100% - 251px);float: right; }
.header .head a {float: right;}

.random {position:  absolute; bottom:   20px;}
.random img {display:  block; width:  auto; height:  auto; max-height: 60vh; max-width: 100%; border: 10px solid #F3EEF2;}


.slider {padding-left: 270px; float: left; width: 100%; padding-top: 30px;}
.slider .item { padding-right:  20px; outline: none; font-size:  14px; line-height: 18px;}
.slider .item a:hover, .slider .item a {outline: none;}
.slider .item img {display:  block;  width:  auto; height: calc(100vh - 250px); max-width: 100%; margin-bottom: 40px}
.counter-info {padding-left: 270px; margin-top: 30px; float: left;}

.single {padding-left: 270px; float: left; width: 100%; padding-top: 30px; padding-right:10px;}
.single .item { padding-right:  20px; outline: none; font-size:  14px; line-height: 18px;}
.single .item img {display:  block;  width:  auto; height: auto; max-width: 100%; max-height: calc(100vh - 270px); margin-bottom: 30px}

.single .woocommerce a.remove {color: #000 !important;}
.single .woocommerce a.remove:hover {background: #000 !important !important;}
.woocommerce #content table.cart img, .woocommerce table.cart img, .woocommerce-page #content table.cart img, .woocommerce-page table.cart img {height: 150px !important; width: auto;}
.single .woocommerce #respond input#submit.alt, .single .woocommerce a.button.alt, .single .woocommerce button.button.alt, .single .woocommerce input.button.alt {background: none !important;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
    text-transform: uppercase;}
.single .shipping-calculator-form {padding: 20px 0 0 0;float: inherit;}
.single .woocommerce form .form-row input.input-text, .single .woocommerce form .form-row textarea {height: 30px; padding: 5px 10px;}
.woocommerce-billing-fields, .woocommerce-shipping-fields {padding-bottom: 25px;}
.woocommerce-additional-fields {display: none;}
#order_review_heading {margin-bottom: 15px}
.woocommerce-message {border-top-color: #000 !important;}
.woocommerce-message::before {color: #000 !important;}


.content {padding-left: 270px;height: calc(100vh - 120px);float: left;width: 100%; padding-top: 30px;}
.content .post {max-width: 450px;}
.content-footer {width: 100%; flex: left; padding: 20px;}
.content-footer a {display: inline-block; width: 250px; text-transform: uppercase;}
.content-footer div {float: right }

.index {display: flex;flex-wrap:wrap; text-transform: uppercase; }
.index a {display: flex;  justify-content: center; align-items: center; position: relative; margin-bottom: 10px;}
.index .indexitem {max-width: 11vw; float: left;  margin: 0 20px 20px 0px;}
.index img {width: auto; max-width: 100%; max-height: 100%; display: block; height: auto;}
.index a:hover, .index a.selected{text-decoration: none;}
.index a:hover img, .index a.selected img {opacity: 0;}
.index a:hover .indexitem , .index a.selected .indexitem  {  background: #f6f6ee; height: 100%;}
.index .indexitem div {position: absolute; bottom: 12px; left:5px; margin:0px; display: none;  }
.index a:hover .indexitem div, .index a.selected .indexitem div {display: block;}


.footer {text-transform:  uppercase; padding: 20px 20px; position: absolute; bottom: 0; right: 0;}



/* ==========================================================================
   Plugins
   ========================================================================== */


/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


.slick-prev { width: 55px; height: 55px; text-indent: -9999em; background:  url('img/leftarrow.png') center center no-repeat; border: none;  position: absolute;  left: 20px;bottom: 115px; z-index: 999;     background-size: 40% !important; }
.slick-next { width: 55px; height: 55px; text-indent: -9999em; background: url('img/rightarrow.png') center center no-repeat; border: none;  position: absolute;  left: 80px;bottom: 115px; z-index: 999;  background-size: 40% !important;}

/* ==========================================================================
   Media Queries
   ========================================================================== */

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

.header, .footer, .counter-info {font-size:   16px;}
.random {position:  absolute; top:  20vh; bottom: inherit; text-align:  center;}
.random img {margin:  0 auto;}
.header .menu {float: left; width: 100%; flex-direction: column; padding-top: 60px;}
.aboutlink {position: absolute; top: 20px; right: 20px;}
.header .menu nav {margin: 0 0 50px 0; width: 100%;}
.header .menu nav ul {margin-top: 20px;}
.header .menu nav ul li {margin-bottom: 5px;}
.header .menu nav ul img, .header .menu nav ul li:hover img {display: none;}
.slider, .single {padding: 10px 10px 0 10px;}
.slider .item { height: 100%; padding-right: 0; padding-bottom: 30px;}
.slider .item img {width: auto; height: auto; margin-bottom: 10px; }
.counter-info {padding: 0 20px;}
.header .back2 {display: block; position: absolute; bottom: 20px; right: 20px; }
.hidemobile {display: none !important;}
.counter-info {position: absolute; bottom: 20px; left: 20px;}
.index .indexitem {max-width: 100%; margin: 0;}
.index {display: grid;  grid-template-columns: 1fr 1fr; grid-gap: 30px;}
.index a {margin: 0;}
.header .logo {width: auto; }
.header .head {width: initial; display: block; position: absolute; top: 10px; right: 10px;}
.header .logo span {font-size: 13px;}
.header {padding: 10px 10px 20px 10px;}
.footer {position: initial; padding: 20px 10px;}
.header .msg { position: initial; width: 100%; margin-top: 20px; }

}

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

.index {grid-template-columns: 1fr;}
}


.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {background: #000 !important;}