/*
-----------------------------------------------
Design Illusions - Layout CSS
Created: 11-Feb-2016
Author:  Velmurugan
Copyright 2016 - www.designillusions.in
All rights reserved

  #####    ######  ####  ######  ####    ##      ##     ###### ##     ##     ##   ##  ####  ######  ####  ##      ##  ####
  ##   ##  ##     ##       ##   ##       ## ##   ##       ##   ##     ##     ##   ## ##       ##   ##  ## ## ##   ## ##
  ##    ## ####   ######   ##   ##  ###  ##  ##  ##       ##   ##     ##     ##   ## ######   ##   ##  ## ##  ##  ## ######
  ##   ##  ##         ##   ##   ##    ## ##   ## ##       ##   ##     ##     ##   ##     ##   ##   ##  ## ##   ## ##     ##
  ####     ######  ####  ######   ####   ##      ##     ###### ###### ######  #####   ####  ######  ####  ##      ##  ####

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

/* font embed */
@font-face { 
  font-family: 'TexGyreAdventor'; 
  src:  url('fonts/texgyreadventor-regular-webfont.eot'); 
  src:  url('fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'), 
        url('fonts/texgyreadventor-regular-webfont.woff') format('woff'),  
        url('fonts/texgyreadventor-regular-webfont.ttf') format('truetype'), 
        url('fonts/texgyreadventor-regular-webfont.svg#texgyreadventor-regular-webfont') format('svg'); 
        src: url('fonts/texgyreadventor-regular-webfont.ttf') format('truetype'); 
        font-weight: normal; font-style: normal;
}

textarea { resize: none;}


/* common override */
html { overflow-y: scroll; height: 100%; }
body { font: 13px/20px TexGyreAdventor; background: #fff; color: #000; height: 100%;}
ul li { list-style: none; }
ul, li { padding: 0; margin: 0;}
a:focus, a, a:hover, a:active, a.active, span:focus, span:hover, span:active { outline: none; }
a { color: #333 }
a:hover { color: #eb090a; text-decoration: none; }

/* headings */
h1, h2, h3, h4, h5, h6 { font-family: TexGyreAdventor; font-weight: normal; color: #2f2f2f }

h1 { font-size: 20px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { color: #009fce }


.container { padding-bottom: 50px; max-width: 900px }

.logo { text-align: right; padding-top: 15px; padding-bottom: 5px }

.main_menu { width: 100%; border-bottom: 1px dotted #ccc; margin-bottom: 20px }
.main_menu li { display: inline-block; }
.main_menu li a { padding: 30px 5px 0; display: block; text-transform: uppercase; }
.main_menu li.active a { background-color: #ff008f; color: #fff; }
.main_menu li a:hover { background-color: #666; color: #fff }

.mobile_button { display: inline-block; border: 1px solid #ddd; border-radius: 3px; cursor: pointer; height: 40px; width: 40px; padding-top: 3px; display: none; margin-top: 10px; margin-bottom: 10px }
.mobile_button span { background-color: #999; display: block; height: 4px; margin: 5px 5px 0;  }

.mobile_header { display: none; margin-top: 0; border-bottom: 1px dotted #ccc; padding-bottom: 7px}


.slick_slider { max-width: 600px; max-height: 400px; margin: 0 auto; position: relative; }
.slick_slider img { width: 100%; }
.slick_slider .slick-arrow, .slick_pause { width: 50px; height: 50px; background: url(../images/icon_sprite.png) no-repeat 0 0; border: 1px solid #8a8989; position: absolute; left: -60px; top: 50%; margin-top: -25px; text-indent: 1000px; overflow: hidden; z-index: 100 }
.slick_slider .slick-next { left: auto; right: -60px; background-position: -50px 0 }
.slick_slider .slick-arrow.slick-prev:hover { background-position: 0 -50px }
.slick_slider .slick-arrow.slick-next:hover { background-position: -50px -50px }
.slick-initialized .slick-slide { height: auto; outline: none;}
.slick_pause { position: static; margin: 5px auto 0; display: block; background-position: -100px 0 }
.slick_pause:hover { background-position: -100px -50px }
.slick_pause.play { background-position: -150px 0 }
.slick_pause.play:hover { background-position: -150px -50px }

footer { position: fixed; bottom: 0; left: 0; width: 100%; line-height: 30px }
footer .author { color: #999 }
footer .copyright { color: #333; text-align: right; }
footer .author a { color: #333; }
footer .author a:hover { color: #eb090a; }

.slick_slider .slick-arrow { left: 0; top: auto; bottom: -55px; margin-top: 0 }
  .slick_slider .slick-next { left: auto; right: 0; }











/* responsive */
.debug { position: fixed; z-index: 1000000000; padding: 10px; background-color: #efefef; color: #444; left: 0; top: 0; display: none;}
@media (max-width: 1306px) {	
  
}

@media (max-width: 1076px) {  
    .main_menu li a { padding: 30px 2px 0 }
}

@media (max-width: 989px) {  
  	
}

@media (max-width: 846px) {  

}

@media (max-width: 767px) {
	footer { position: default; }
	footer .author, footer .copyright { text-align: center; line-height: 20px }
    .mobile_button { display: block; }
  .main_menu li { display: block; }
  .main_menu li a { padding: 5px 10px }
  .mobile_header { display: block; }
}

@media (max-width: 592px) {  
  
}

@media (max-width: 400px) {  
  
}

@media (max-height: 592px) {  
  
}