/*

	*********************************************************************************************************************

	Custom RESPONSIVE SASS - Project: Anmoder

	Tasks: Html / Css / jQuery

	Client: Wonton

	Version: 1.0

	********************************************************************************************************************

*/

/* *********************************************************************************************************************

 * IMPORTS

 */

/* *********************************************************************************************************************

 * RESPONSIVE MEDIA QUERIES

 */

/* *********************************************************************************************************************

 * LARGE SCREENS > 1280

 */

@media screen and (min-width: 1280px) {

  .product-list ul li.new {

    margin-right: 38px;

  }

  .product-list ul li.new:nth-child(3n) {

    margin-right: 38px;

  }

  .product-list ul li.new:nth-child(4n) {

    margin-right: 0;

  }



  .product-data .bts a span {

    width: 100%;

    padding-left: 10px;

  }

  .product-data .share ul {

    text-align: left;

  }



  .project-list ul li {

    margin: 60px 90px 0 0;

  }

  .project-list ul li a .img-container span {

    margin: 200px 0 0 155px;

  }

  .project-list ul li a .img-container img {

    width: 400px;

  }

  .project-list ul li .title {

    font-size: 14px;

  }



  .press-list ul li {

    margin: 60px 40px 0 0;

  }

  .press-list ul li:nth-child(3n) {

    margin-right: 40px;

  }

  .press-list ul li:nth-child(4n) {

    margin-right: 0;

  }

}

/* *********************************************************************************************************************

 * 1024 TO 1280 SCREENS 

 */

@media screen and (min-width: 1025px) and (max-width: 1279px) {

  .project-list ul li {

    max-width: 320px;

  }



  .request-form {

    margin-left: -50px;

  }

}

/* *********************************************************************************************************************

 * 1024 SCREENS 

 */

@media screen and (min-width: 981px) and (max-width: 1024px) {

  .project-list ul li {

    max-width: 320px;

  }

}

/* *********************************************************************************************************************

 * PORTRAIT TABLET TO LANDSCAPE AND DESKTOP

 */

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

  #menu {

    margin-left: 20px;

  }

  #menu .menu {

    width: 170px;

  }



  .language {

    padding-right: 20px;

  }



  .breadcrumbs ul li a span {

    padding: 0 2px;

  }

  .breadcrumbs ul li:after {

    padding-left: 1px;

  }



  #wrapper.home .bkg .slide {

    background-position: 50% 0;

  }



  .filters ul li {

    display: inline-block;

    margin-bottom: 5px;

  }

  .filters ul li a {

    font-size: 11px;

    padding: 3px 6px;

  }

  .filters ul li:last-child {

    float: none;

  }



  .product-list ul li.new:nth-child(3n) {

    margin-right: 67px;

  }

  .product-list ul li.new:nth-child(2n) {

    margin-right: 0;

  }

  .product-list.no-filter {

    margin-top: 50px;

  }



  .product-images {

    margin-top: 190px;

    padding-right: 0;

  }

  .product-images ul li:hover {

    opacity: 1;

    filter: alpha(opacity=100);

  }

  .product-images ul li:before {

    display: none;

  }



  .product-data {

    position: absolute;

    top: 35px;

  }

  .product-data .controls {

    text-align: center;

  }

  .product-data .info .title {

    margin: 5px 0 15px 0;

    letter-spacing: 1px;

    text-align: center;

  }

  .product-data .info .open-data {

    height: 25px;

    padding: 3px 7px;

    font-size: 13px;

    background-color: #f7f74b;

    cursor: pointer;

  }

  .product-data .info .open-data span:after {

    position: relative;

    width: 30px;

    height: 30px;

    float: right;

    margin: -11px 5px 0 0;

    content: '';

    background: url("../images/shared/controls-sprite.svg") -680px 1px no-repeat;

    -webkit-background-size: 760px 40px;

    background-size: 760px 40px;

  }

  .product-data .info .open-data span.up:after {

    background-position: -720px 1px;

  }

  .product-data .info .values {

    display: none;

    padding: 20px 0;

    background-color: rgba(255, 255, 255, 0.9);

  }

  .product-data .bts {

    display: none;

    margin-top: 0;

  }

  .product-data .bts a {

    background-color: rgba(255, 255, 255, 0.9);

  }

  .product-data .bts a span {

    width: 100%;

    padding-left: 10px;

  }

  .product-data .share {

    display: none;

  }



  .request-form {

    margin: 80px 0 0 20%;

  }



  .project-list ul li {

    width: 43%;

    max-width: 320px;

  }

  .project-list ul li a .img-container span {

    display: none;

  }

  .project-list ul li a.disabled .img-container span {

    margin: 105px 0 0 9%;

    display: block;

  }

  .project-list ul li a:not(.disabled):hover img {

    opacity: 0.5;

    filter: alpha(opacity=50);

  }



  .project-slider {

    margin-top: 70px;

  }

  .project-slider .title {

    font-size: 13px;

    letter-spacing: 0.5;

  }

  .project-slider .lSAction > .lSPrev {

    left: 10px;

  }

  .project-slider .lSAction > .lSNext {

    right: 10px;

  }



  #wrapper.rent {

    overflow: hidden;

    height: 1800px !important;

  }

  #wrapper.rent .bkg {

    width: 473px !important;

    height: 1787px !important;

    background-image: url("../images/rent/bkg-768.jpg");

  }



  .press-list ul li {

    margin: 60px 60px 0 0 !important;

  }



  #newsletter .title {

    font-size: 16px;

    margin-right: 30px;

  }

  #newsletter .form .field input[type="text"] {

    width: 250px;

  }



  #footer .address {

    padding-left: 5px;

    font-size: 11px;

  }

  #footer .legal {

    padding-right: 5px;

  }

}

/* *********************************************************************************************************************

 * LANDSCAPE MOBILES AND DOWN

 */

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

  .rwd-break {

    display: block;

  }



  #content {

    margin: 40px 0 280px 0;

    padding-bottom: 0;

  }



  #wrapper.products #content,

  #wrapper.products-news #content,

  #wrapper.projects #content,

  #wrapper.rent #content,

  #wrapper.press #content,

  #wrapper.contact #content {

    margin-top: 0;

    text-align: center;

  }



  .breadcrumbs,

  .language,

  .scrollup {

    display: none;

  }



  .about .text,

  .legal .text,

  .map .text {

    margin-top: 0;

    padding-left: 10px;

  }

  .about .text p,

  .legal .text p,

  .map .text p {

    line-height: 20px;

  }



  #content {

    padding-left: 0 !important;

  }



  #menu-mobile {

    position: fixed;

    left: 0;

    width: 100%;

    height: 40px;

    background-color: #fff;

    z-index: 98;

  }

  #menu-mobile .hamburguer {

    display: inline-block;

    float: left;

    padding-left: 10px;

  }

  #menu-mobile .hamburguer:before {

    width: 40px;

    height: 40px;

    background-position: -600px 0;

  }

  #menu-mobile img {

    position: absolute;

    display: inline-block;

    width: 148px;

    height: 16px;

    left: 50%;

    margin: 12px 0 0 -74px;

  }



  #menu {

    left: -300px;

    width: 90%;

    height: 100%;

    padding-left: 20px;

    background-color: rgba(0, 0, 0, 0.95);

    overflow: scroll;

    z-index: 99;

    display: none;

  }

  #menu .hamburguer {

    display: inline-block;

    width: 30px;

    height: 30px;

  }

  #menu .hamburguer:before {

    width: 30px;

    height: 30px;

    background-position: -650px 0;

  }

  #menu .language {

    display: block;

    float: right;

    font-size: 10px;

    margin: 10px 20px 0 0;

  }

  #menu .logo {

    margin: 30px 0 15px 0;

    width: 256px;

    height: 48px;

  }

  #menu .menu, #menu .menu * {

    background-color: transparent !important;

  }

  #menu .menu {

    width: 230px;

    margin-bottom: 20px;

  }

  #menu .menu ul.second {

    display: block !important;

  }

  #menu .menu li {

    line-height: 35px;

    border-top: 1px solid #222;

  }

  #menu .menu li:hover > a, #menu .menu li.sfHover > a, #menu .menu li.current > a {

    color: #fff !important;

  }

  #menu .menu a {

    font-size: 19px;

    color: #fff !important;

  }

  #menu .menu a.submenu:after {

    margin: 13px 0 0 6px;

    border-top-color: #ccc;

  }

  #menu .menu a.submenu:hover:after {

    border-top-color: #666;

  }

  #menu .menu ul:not(.first) {

    margin-left: 15px;

  }

  #menu .menu ul:not(.first) li {

    border-top: 0;

  }

  #menu .menu ul:not(.first) li:first-child {

    margin-top: 12px;

  }

  #menu .menu ul:not(.first) li:last-child {

    margin-bottom: 12px;

  }

  #menu .menu ul:not(.first) a {

    border-top: 0;

  }

  #menu .menu ul:not(.first):not(.second) {

    margin-left: 25px;

  }

  #menu .menu ul:not(.first):not(.second) li {

    line-height: 16px;

  }

  #menu .menu ul:not(.first):not(.second) li:first-child {

    margin-top: 15px;

  }

  #menu .menu ul:not(.first):not(.second) li:last-child {

    margin-bottom: 15px;

  }

  #menu .menu ul:not(.first):not(.second) a {

    font-size: 15px;

    padding-bottom: 12px;

    border-top: 0;

  }



  #wrapper.home #content {

    margin: 0;

  }

  #wrapper.home .preload {

    top: 50%;

    margin-top: -15px;

  }

  #wrapper.home .mobile-images {

    display: none;

  }

  #wrapper.home .mobile-images img {

    display: block;

  }

  #wrapper.home #footer {

    display: none;

    position: relative !important;

  }



  #wrapper.about .bkg {

    background-position: -50px 0;

  }

  #wrapper.about #content {

    margin-top: 80px;

  }



  .filters {

    margin-top: 60px;

    text-align: left;

    padding-left: 10px;

  }

  .filters ul li {

    display: inline-block;

    margin-bottom: 7px;

  }

  .filters ul li a {

    font-size: 11px;

    padding: 4px 7px;

  }

  .filters ul li:last-child {

    float: none;

  }



  .product-list {

    text-align: center;

  }

  .product-list ul li {

    margin: 40px 0 0 0 !important;

    width: 280px;

    height: 335px;

  }

  .product-list ul li:first-child {

    margin-top: 20px !important;

  }

  .product-list ul li:last-child {

    margin-bottom: 40px !important;

  }

  .product-list ul li .img-container img {

    width: 280px;

    height: 280px;

  }

  .product-list.filtered ul li {

    margin-left: calc(50% - 140px) !important;

  }



  .product-images {

    margin-top: 170px;

    padding-right: 0;

  }

  .product-images ul li:before {

    display: none;

  }



  .product-data {

    position: absolute;

    top: 40px;

    margin-top: 15px;

    padding-left: 10px;

    text-align: left;

  }

  .product-data .controls {

    text-align: center;

  }

  .product-data .info .title {

    margin: 5px 0;

    font-size: 16px;

    letter-spacing: 1px;

    text-align: center;

  }

  .product-data .info .open-data {

    height: 25px;

    padding: 3px 7px;

    font-size: 13px;

    background-color: #f7f74b;

    cursor: pointer;

  }

  .product-data .info .open-data span:after {

    position: relative;

    width: 30px;

    height: 30px;

    float: right;

    margin: -11px 5px 0 0;

    content: '';

    background: url("../images/shared/controls-sprite.svg") -680px 1px no-repeat;

    -webkit-background-size: 760px 40px;

    background-size: 760px 40px;

  }

  .product-data .info .open-data span.up:after {

    background-position: -720px 1px;

  }

  .product-data .info .values {

    display: none;

    padding: 20px 0;

    background-color: rgba(255, 255, 255, 0.9);

  }

  .product-data .bts {

    display: none;

    margin-top: 0;

  }

  .product-data .bts a {

    background-color: rgba(255, 255, 255, 0.9);

  }

  .product-data .share {

    display: none;

  }



  .request-form {

    top: 0px;

    margin-left: -10px;

  }



  .project-list {

    margin-top: 10px;

  }

  .project-list ul li {

    width: 100%;

    max-width: 320px;

    margin: 50px 0 0 0 !important;

  }

  .project-list ul li:last-child {

    margin-bottom: 40px !important;

  }

  .project-list ul li a .img-container span {

    display: none;

  }

  .project-list ul li a.disabled .img-container span {

    margin: 135px 0 0 105px;

    display: block;

  }

  .project-list ul li a:not(.disabled):hover img {

    opacity: 0.5;

    filter: alpha(opacity=50);

  }



  .project-slider {

    margin: 60px 0 30px 0;

  }

  .project-slider .title {

    height: auto;

    font-size: 12px;

    line-height: 15px;

    letter-spacing: 0.5;

    padding: 8px 0 8px 15px;

    display: block;

    text-align: left;

  }

  .project-slider .title .close {

    position: absolute;

    right: 13px;

    top: 62px;

    margin: 0;

    -moz-transform: scale(0.8);

    -o-transform: scale(0.8);

    -ms-transform: scale(0.8);

    -webkit-transform: scale(0.8);

    transform: scale(0.8);

  }

  .project-slider .slider .lslide img {

    min-height: 0;

  }

  .project-slider .lSAction > a {

    top: 48%;

    -moz-transform: scale(0.8);

    -o-transform: scale(0.8);

    -ms-transform: scale(0.8);

    -webkit-transform: scale(0.8);

    transform: scale(0.8);

  }

  .project-slider .lSAction > .lSPrev {

    left: 5px;

  }

  .project-slider .lSAction > .lSNext {

    right: 5px;

  }



  #wrapper.rent {

    overflow: hidden;

    height: 1900px !important;

  }

  #wrapper.rent .bkg {

    width: 320px !important;

    height: 1758px !important;

    margin-left: calc(50% - 160px);

    background-image: url("../images/rent/bkg-320x2.jpg");

    -webkit-background-size: 320px 1758px;

    background-size: 320px 1758px;

  }



  .rent .box {

    margin: 70px 20% 1250px 20%;

    padding: 15px;

    font-size: 13px;

    line-height: 16px;

    text-align: left;

  }



  .press-list {

    text-align: center;

  }

  .press-list ul li {

    margin: 40px 0 0 0 !important;

  }

  .press-list ul li:last-child {

    margin-bottom: 40px !important;

  }



  #wrapper.contact #menu-mobile {

    background-color: #f7f74b;

  }



  .contact .mapsvg {

    margin: 60px 0 30px 0px;

  }

  .contact .mapsvg img {

    display: none;

  }

  .contact .form,

  .contact .info {

    text-align: left;

    padding: 0 10px;

  }

  .contact .info {

    margin: 50px 0 15px 0;

  }

  .contact .info a.map-bt {

    margin-top: 30px;

  }



  .map .text {

    margin: 20px 0 40px 0;

  }



  #newsletter {

    height: 120px;

    top: 50%;

    padding-top: 0;

    z-index: 98;

  }

  #newsletter .title {

    display: block;

    line-height: 23px;

    margin: 15px 0 10px 0;

    font-size: 17px;

  }

  #newsletter .form {

    display: block;

    padding-left: 10px;

  }

  #newsletter .form .field {

    display: inline-block;

    margin: -4px 0 0 -5px;

  }

  #newsletter .form .field input[type="text"] {

    width: 95%;

  }

  #newsletter .form .submit-bt button {

    font-size: 12px;

    width: 70px;

  }

  #newsletter .close-bt {

    position: absolute;

    display: block;

    width: 30px;

    height: 30px;

    right: 5px;

    margin-top: -90px;

    -moz-transform: scale(0.7);

    -o-transform: scale(0.7);

    -ms-transform: scale(0.7);

    -webkit-transform: scale(0.7);

    transform: scale(0.7);

  }

  #newsletter .close-bt .close:hover:before {

    -moz-transform: scale(1);

    -o-transform: scale(1);

    -ms-transform: scale(1);

    -webkit-transform: scale(1);

    transform: scale(1);

  }



  #footer {

    height: auto;

    padding-top: 22px;

    line-height: 25px;

  }

  #footer .address {

    padding-left: 10px;

    font-size: 15px;

  }

  #footer .address .followtxt {

    margin-left: 0;

  }

  #footer .address a {

    display: block;

    margin-left: 0;

  }

  #footer .address a:first-of-type {

    margin-top: 20px;

  }

  #footer .address a.follow {

    display: inline-block;

  }

  #footer .address a.newsletter-bt, #footer .address a:last-child {

    margin-left: 0;

  }

  #footer .legal {

    padding-left: 10px;

    margin: 20px 0;

    text-align: left;

    font-size: 11px;

  }

}