/* 
    Document   : Microsite - Studentfone
    Author     : Ondrej Kucera
*/

#studentfone {
    max-width: 980px;
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #212121;
    padding-bottom: 30px;
}

#studentfone h2, 
#studentfone h3 {
    font-family: Arial, sans-serif;
    color: #ed2c2b;
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    line-height: 1.1em;
}

#studentfone h2.alt {
    color: #212121;
    margin-bottom: 10px;
}

#studentfone h3 {
    color: #fff;
    margin-bottom: 25px;
}

#studentfone p {
    font-size: 18px;
    color: #212121;
    line-height: 1.2em;
    margin: 10px 0;
}

#studentfone a {
    color: inherit;
}

#studentfone a:hover {
    color: #ed2c2b;
}

#studentfone img {
    max-width: 100%;
    display: block;
}

#studentfone .logo {
    margin: 20px auto;
}

#studentfone .wrap {
    position: relative; 
    padding: 30px 50px 40px;
}

#studentfone .wrap.coloured {
    background-color: #b9d033;
    padding-bottom: 20px;
}

#studentfone .wrap.footer {
    background-color: #222222;
}

#studentfone .img-left {
    float: left;
    margin-right: 75px;
}

#studentfone .img-right {
    float: right;
    margin-left: 75px;
}

#studentfone .centered {
    text-align: center;
}

#studentfone .clearfix:after {
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}


/**** 
    **********************************
    TOP NAV
    **********************************
*****/

#studentfone > #nav .nav-btn {
    display: none;
}

#studentfone > #nav ul {
    list-style: none; 
    margin: 0;
    padding: 20px 50px;
    font-size: 0;
    text-align: center;
}

#studentfone #nav ul > li {
    background-image: none;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    padding-right: 38px;
}

#studentfone #nav ul > li.last {
    background-image: none;
    display: inline-block;
    vertical-align: top;
    padding-right: 0;
}

#studentfone #nav ul> li a {
    font-size: 18px;
    color: #212121;
    text-decoration: none !important;
    border-bottom: 2px solid #fff;
    -webkit-transition: border 0.5s ease-in-out;
    -moz-transition: border 0.5s ease-in-out;
    -ms-transition: border 0.5s ease-in-out;
    -o-transition: border 0.5s ease-in-out;
    transition: border 0.5s ease-in-out;      
}

#studentfone #nav ul > li a:hover {
    text-decoration: none !important;
    border-bottom: 2px solid #ed2c2b;
}


/**** 
    **********************************
    TABLE - PRICE LIST
    **********************************
*****/

#studentfone table {
    width: 400px;
}   

#studentfone table tr:not(.hoverless):hover {
    background-color: #ed2c2b;
    cursor: default;
}

#studentfone table tr:not(.hoverless):hover td {
    color: #fff;
}

#studentfone table td {
    position: relative;
    font-size: 18px;
    color: #212121;
    line-height: 1.2em;
    padding: 3px 5px;
}

#studentfone table td.align-right {
    text-align: right;
}

#studentfone .arrow {
    position: absolute;
    top: 5px;
    left: -25px;
}

#studentfone .new {
    color: #ed2c2b;
    font-size: 18px;
}

#studentfone .note {
    font-size: 18px;
    color: #212121;
    line-height: 1.2em;
    padding: 0 50px;
}


/**** 
    **********************************
    UNORDERED LIST
    **********************************
*****/

#studentfone ul.bullet {
    list-style: none; 
    margin: 0;
    padding: 0;
}

#studentfone ul.bullet.ul-right {
    width: 450px;
    float: right;
}

#studentfone ul.bullet > li {
    background: url(../images/ul-bullet.png) 0 9px no-repeat transparent;
    font-size: 18px;
    color: #212121;
    line-height: 1.2em;
    padding: 5px 0 5px 20px;    
}


/**** 
    **********************************
    UNORDERED LIST - CHECKED
    **********************************
*****/

#studentfone ul.checked {
    list-style: none; 
    margin: 0;
    padding: 0;
}

#studentfone ul.checked > li {
    background: url(../images/ul-check.png) 0 1px no-repeat transparent;
    font-size: 20px;
    color: #fff;
    line-height: 1.2em;
    padding: 5px 50px 5px 45px;  
    display: inline-block;
    vertical-align: top;
}


/**** 
    **********************************
    BUTTON
    **********************************
*****/

#studentfone .button {
    display: block;
    width: 200px;
    margin: 40px auto;
    padding: 7px 0;
    text-align: center;    
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    background: #ed2c2b;;
    text-decoration: none !important; 
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;    
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;    
}

#studentfone .button:hover {
    color: #fff;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}


/**** 
    **********************************
    MOBILE
    **********************************
*****/

@media screen and (max-width: 750px) {
    
    .article {
        padding: 0;
    }    
    
    #studentfone > #nav {
        background-color: whitesmoke;
        padding: 10px;
    }    
    
    #studentfone > #nav ul {
        display: none;
        padding: 0;
    }    
    
    #studentfone > #nav ul > li {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0;
        padding: 10px 10px 5px 15px;
    } 
    
    #studentfone > #nav ul > li > a {
        border-bottom-color: whitesmoke;
    }     
    
    #studentfone > #nav .nav-btn {
        display: block;
        position: relative;
        font-weight: bold;
        font-size: 24px;
        color: #444;
        line-height: 24px;
        cursor: pointer;
        padding: 10px;
        background: url(../images/icon-menu.png) no-repeat right center;
    }  
    
    #studentfone .wrap {
        padding: 30px 20px 40px;
    }    
    
    #studentfone .img-left, 
    #studentfone .img-right {
        float: none;
        margin: 0 auto 20px;
    }    
  
    #studentfone table {
        width: 100%;
    } 
    
    #studentfone ul.bullet.ul-right {
        width: 100%;
        float: none;
    } 
    
    #studentfone ul.checked > li {
        padding-right: 0;
    }    
    
}