/* big tablet and pc's (width smaller than 1140px) */

@media only screen and (max-width: 1200px) {
    .hero-text-box {
        padding: 0 2%;
        width: 100%;
    }
    .row {
        padding: 0 2%;
    }
    .logo-color {
        margin-left: 2%;
    }
    .main-nav {
        margin-right: 2%;
    }
}


/* Ipad in portrait mode*/

@media only screen and (max-width: 1023px) {
    body {
        font-size: 18px;
    }
    section {
        padding: 60px 0;
    }
    .main-nav{
        margin-top: 32px;
    }

    .main-nav li a {
        display: none;
    }
    .main-nav a.icon {
        float: right;
        display: block;

    }
    .main-nav.responsive {
        position: relative;
        float: none;
        margin-left: 80px;
        margin-top: 32px;
        margin-bottom: 30px;
    }
    .main-nav.responsive li a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .main-nav.responsive li a {
        float: none;
        display: inline;
        text-align: left;
    }
    .main-nav li a.icon{
        display: block;
    }
    .main-nav.responsive li {
        display: block;
    }
    .main-nav li a:link,
    .main-nav li a:visited {
        padding: 2px 0;
    }
    nav li ul {
        position: relative;
    }
    .second-level-nav {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0);
        width: 100%;
    }
    .second-level-nav li a:link,
    .second-level-nav li a:visited,
    .sticky .second-level-nav li a:link,
    .sticky .second-level-nav li a:visited {
        padding: 2px 0;
        color: #555;
        margin-left: 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0);
        -webkit-transition: border-bottom 0.2s;
        transition: border-bottom 0.2s;
    }
    .second-level-nav li a:link,
    .second-level-nav li a:visited {
        color: #ffffff;
    }
    .second-level-nav li a:hover,
    .second-level-nav li a:active,
    .sticky .second-level-nav li a:hover,
    .sticky .second-level-nav li a:active {
        border-bottom: 2px solid #d35400;
    }
    .main-nav.responsive li {
        padding: 2px;
    }
    #nav li {
        position: static;
    }
    #myTopnav {
        margin-right: 2%;
    }
    .main-nav li a:link,
    .main-nav li a:visited,
    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited {
        padding: 2px 0;
    }

}

@media only screen and (max-width: 900px) {
    .hero-text-box h1 {
        font-size: 130%;
    }
}

/* Larger phones. This has to be above the lowest max-width because the lowest will be read last*/

@media only screen and (max-width: 767px) {
    .hero-text-box h1 {
        font-size: 120%;
    }
    .btn:link,
    btn:visited {
        padding: 5px 20px;
        font-size: 90%;
    }
    .logo-white {
        height: 80px;
    }
    .flyer-picture img{
        display: none;
    }
    .flyer-text{
        display: none;
    }


}

@media only screen and (max-width: 732px){
    .span-1-of-3{
        width: 100%;
    }
    blockquote, .box p{
        font-size: 80%;
    }
    blockquote{
        margin-top: 0px;
        margin-bottom: 10px;
        text-align: center;
    }
    .section-testemonials .reactions-exception{
        margin-bottom: 60px;
    }
    .section-features .long-copy{
        line-height: 130%;
    }
}
@media only screen and (max-width: 610px){
    .section-features .long-copy{
        margin-top: 0;
    }

}
@media only screen and (max-width: 550px){
    .picture-cover{
        width: 70%;
    }
}
/* Small phones. Between 0px and 480px */

@media only screen and (max-width: 480px) {
    .hero-text-box{
        text-align: center;
        margin-top: 100px;
    }


    .span-1-of-2.exception{
        width: 100%;
    }
    .long-copy, .feature-photo{
        width: 100%;
        float: none;
    }
    .picture-cover{
        width: 45%;
    }
    .span-1-of-2.exception.feature-photo{
        text-align: center;
    display: table-cell;
    vertical-align: middle;
    }
    .span-1-of-2.exception{
        float: none;
    }

    .section-books .span-1-of-2.exception{
        width: 48%;
        float: left;
        font-size: 80%;
    }
    .long-copy{
        margin: 0;
    }
    .section-features .long-copy{
        text-align: center;
    }

    .book-cover, .book-cover2{
        width: 70%;
    }
    .main-nav li, .sticky .main-nav li {
        margin-left: 15px;
    }
    .main-nav.responsive, .sticky .main-nav.responsive {
        margin-left: 20%;
        margin: 7% 1% 10% 20%;
    }
    img.logo-white, .sticky img.logo-color {
        width: 17%;
        height: auto;
        margin-bottom: 3px;
    }
    img.logo-white{
        margin-top: 2%;
    }
    .main-nav, .sticky .main-nav {
        margin: 7% 0 3% 0;
    }
    .main-nav a.icon, sticky .main-nav a.icon {
        margin-right: 10px;
    }
    .main-nav.responsive li a.icon, .sticky .main-nav.responsive li a.icon {
        margin-right: 7.5px;
    }
    ul.second-level-nav li, .sticky ul.second-level-nav li {
        margin-left: 5px;
    }
    .second-level-nav li a:link,
    .second-level-nav li a:visited,
    .sticky .second-level-nav li a:link,
    .sticky .second-level-nav li a:visited {
        margin-left: 0;
    }
    footer .col.span-1-of-2, .sticky footer .col.span-1-of-2 {
        text-align: center;
    }
    footer .social-links {
        float: none;
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 390px){
    .section-books .span-1-of-2.exception{
        font-size: 55%;
    }
    .flyer-picture img{
        display: none;
    }
}