/*
===========================================================
Name source:    viewport.css
Name:           Style of nolimit.sk - Mobile version
Author:         nolimit|DEVELOPERS - http://www.nolimit.sk
License:        Copyright (c) 2004 - 2014 All rights reserved
===========================================================
*/

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

/*Small screen Mobile (portrait) 320x480 -----------
             ___
            |   |
            |   |
            |___|
*/

/*****************************************************/
@media (max-width:340px) and (orientation:portrait) {

    /*header*/
    header { height: 10%; }
    header img { height: 100%; }

    /*section*/
    section ul { width: 100%; height: 60%; text-align: center; }
    section ul li:first-child b { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
    section ul li p { font: 400 100%/120% "NovecentowideBookBold", arial, sans-serif; }
    section ul.what small { font: 400 80%/120% "NovecentowideNormalRegular", arial, sans-serif; }

    /*project*/
    section ul.project li:nth-child(2n) { padding: 5% 0; }
    section ul.project img { height: auto; width: 50%; }

    /*clients*/
    section ul.clients li:nth-child(2n) { padding: 10% 0; }
    section ul.clients img { height: 4%; }

    /*contatcs*/
    section ul.contacts span { font: 400 70%/150% "tahoma", arial, sans-serif; }

    /*footer*/
    footer { height: 10%; }
    footer div i { font-size: 80%; padding: 0 1% }
    footer div:nth-child(2) h1 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; padding: 0 3%; }
    footer h5 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
}

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

/*Small screen Mobile (landscape) 480x320 ----------
     ________
    |        |
    |________|
*/

/*****************************************************/
@media (max-width:480px) and (orientation:landscape) {

    /*header*/
    header { height: 20%; }
    header img { height: 100%; }

    /*section*/
    section ul { width: 100%; height: 80%; text-align: center }
    section ul li:first-child b { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
    section ul li p { font: 400 100%/120% "NovecentowideBookBold", arial, sans-serif; }
    section ul.what small { font: 400 80%/120% "NovecentowideNormalRegular", arial, sans-serif; }

    /*project*/
    section ul.project li:nth-child(2n) { padding: 5% 0; }
    section ul.project img { height: auto; width: 30%; }

    /*clients*/
    section ul.clients li:nth-child(2n) { padding: 10% 0; }
    section ul.clients img { height: 8%; }

    /*contatcs*/
    section ul.contacts span { font: 400 70%/150% "tahoma", arial, sans-serif; }

    /*footer*/
    footer { height: 10%; }
    footer div i { font-size: 80%; padding: 0 1% }
    footer div:nth-child(2) h1 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; padding: 0 3%; }
    footer h5 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
}

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

/*Tablet , smartphone screen (portrait) ------------
     ______
    |      |
    |  S3  |
    |  S4  |
    |______|
*/

/*****************************************************/
@media (min-width:341px) and (max-width:564px) and (orientation:portrait) {

    /*header*/
    header { height: 10%; }
    header img { height: 100%; }

    /*section*/
    section ul { width: 100%; height: 50%; text-align: center }
    section ul li:first-child b { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
    section ul li p { font: 400 100%/120% "NovecentowideBookBold", arial, sans-serif; }
    section ul.what small { font: 400 80%/120% "NovecentowideNormalRegular", arial, sans-serif; }

    /*project*/
    section ul.project img { height: auto; width: 50%; }

    /*clients*/
    section ul.clients img { padding: 1em; }

    /*contatcs*/
    section ul.contacts span { font: 400 70%/150% "tahoma", arial, sans-serif; }

    /*footer*/
    footer { height: 10%; }
    footer div i { font-size: 80%; padding: 0 1% }
    footer div:nth-child(2) h1 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; padding: 0 3%; }
    footer h5 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
}

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

/*Tablet , smartphone screen (landscape) ----------
     _________
    |         |
    |  S3,S4  |
    |_________|
*/

/*****************************************************/
@media (min-width:481px) and (max-width:832px) and (orientation:landscape) {

    /*header*/
    header { height: 15%; }
    header img { height: 100%; }

    /*section*/
    section ul { width: 50%; height: 100%; text-align: center; }
    section ul li:first-child b { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
    section ul li p { font: 400 100%/120% "NovecentowideBookBold", arial, sans-serif; }
    section ul.what small { font: 400 80%/120% "NovecentowideNormalRegular", arial, sans-serif; }

    /*project*/
    section ul.project img { height: auto; width: 60%; }

    /*clients*/
    section ul.clients img { padding: 1em; }

    /*contatcs*/
    section ul.contacts span { font: 400 70%/150% "tahoma", arial, sans-serif; }
    section ul.contacts { width: 50%; }

    /*footer*/
    footer { height: 10%; }
    footer div i { font-size: 80%; padding: 0 1% }
    footer div:nth-child(2) h1 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; padding: 0 2%; }
    footer h5 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
}

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

/*iPad screen (portrait) ---------------------------
     ________
    |        |
    |        |
    |  iPad  |
    |        |
    |________|
*/

/*****************************************************/
@media (min-width:565px) and (orientation:portrait) {

    /*header*/
    header { height: 10%; }
    header img { height: 100%; }

    /*section*/
    section { /*height: 80%*/ }
    section ul { width: 50%; height: 50%; text-align: center }
    section ul li:first-child b { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
    section ul li p { font: 400 120%/150% "NovecentowideBookBold", arial, sans-serif; }
    section ul.what small { font: 400 80%/120% "NovecentowideNormalRegular", arial, sans-serif; }

    /*project*/
    section ul.project img { height: auto; width: 50%; }

    /*clients*/
    section ul.clients { width: 100%; }
    section ul.clients img { padding: 1em; }

    /*contatcs*/
    section ul.contacts span { font: 400 70%/150% "tahoma", arial, sans-serif; }
    section ul.contacts { width: 100%; }

    /*footer*/
    footer { height: 10%; }
    footer div i { font-size: 100%; padding: 0 1% }
    footer div:nth-child(2) h1 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; padding: 0 2%; }
    footer h5 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
}

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

/*iPad screen  (landscape) -------------------------
     ____________
    |            |
    |    iPad    |
    |            |
    |____________|
*/

/*****************************************************/
@media (min-width:833px) and (orientation:landscape) {

    /*header*/
    header { height: 15%; }
    header img { height: 80%; }

    /*section*/
    section { /*height: 65%*/ }
    section ul { width: 23%; height: 100%; text-align: center; padding: 0 1% }
    section ul li:first-child b { font: 400 70%/100% "NovecentowideNormalRegular", arial, sans-serif; }
    section ul li p { font: 400 90%/150% "NovecentowideBookBold", arial, sans-serif; }
    section ul.what small { font: 400 70%/120% "NovecentowideNormalRegular", arial, sans-serif; }
    section ul.what { width: 31%; }

    /*project*/
    section ul.project img { height: auto; width: 70%; }
    section ul.project { width: 31%; }

    /*clients*/
    section ul.clients img { height: 30%; }
    section ul.clients { width: 31%; }

    /*contatcs*/
    section ul.contacts span { font: 400 70%/150% "tahoma", arial, sans-serif; }
    section ul.contacts { width: 100%; }

    /*footer*/
    footer { height: 10%; }
    footer div i { font-size: 100%; padding: 0 1% }
    footer div:nth-child(2) h1 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; padding: 0 1%; }
    footer h5 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width:1224px) {

    /*header*/
    header { height: 15%; }
    header img { height: 80%; }

    /*section*/
    section { /*height: 65%*/ }
    section ul { width: 23%; height: 100%; text-align: center; padding: 0 1% }
    section ul li:first-child b { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
    section ul li p { font: 400 110%/150% "NovecentowideBookBold", arial, sans-serif; }
    section ul.what small { font: 400 90%/120% "NovecentowideNormalRegular", arial, sans-serif; }
    section ul.what { width: 23%; }

    /*project*/
    section ul.project img { height: auto; width: 70%; }
    section ul.project { width: 23%; }

    /*clients*/
    section ul.clients img { padding: 1em; }
    section ul.clients { width: 23%; }

    /*contatcs*/
    section ul.contacts span { font: 400 70%/150% "tahoma", arial, sans-serif; }
    section ul.contacts { width: 23%; }

    /*footer*/
    footer { height: 10%; }
    footer div i { font-size: 100%; padding: 0 1% }
    footer div:nth-child(2) h1 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; padding: 0 1%; }
    footer h5 { font: 400 50%/100% "NovecentowideNormalRegular", arial, sans-serif; }
}

/* Large screens ----------- */
@media only screen and (min-width:1824px) {
color: #242424; }