@media only screen and (max-width: 1920px){
    
    .three-column-red{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 780px;
        border: 5px solid;
        border-color: #fc4237;
    }
    .three-column-green{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 780px;
        border: 5px solid;
        border-color: #76bd1d;
    }
    
    .three-column-blue{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 780px;
        border: 5px solid;
        border-color: #1fc2de;
    }
    .section-testimonials{
        height: 430px;
    }
    .background-white {
        width: 90%;
        line-height: 25px;
        line-height: 25px;
        height: 460px;
        margin-left: 5%;
    }
    .row-features {
        max-width: 80%;
        margin: 0 auto;
        font-size: 120%;
        line-height: 25px;
    }
    .five-column{
        font-size: 90%;
    }
}

@media only screen and (max-width: 1600px){
    .section-testimonials{
        height: 470px;
    }
    .background-white {
        width: 90%;
        line-height: 25px;
        height: 450px;
        margin-left: 5%;
    }
    .grey {
        padding: 0;
        width: 90%;
        margin-left: 5%;
        height: 950px;
    }
    .row-features {
        max-width: 90%;
        margin: 0 auto;
        font-size: 120%;
        line-height: 35px;
    }
    .three-column-green{
        height: 830px;
    }
    .three-column-red{
        height: 830px;
    }
    .three-column-blue{
        height: 830px;
    }
    .resource-box{
        font-size: 80%;
    }
    .five-column{
        font-size: 85%;
        height: 450px;
    }
    .background-services {
        background-image: linear-gradient(rgba(255, 255, 255, 0.53), rgb(255, 255, 255)),   url(https://s3.amazonaws.com/blipwebsite/Services_Banner.png);
        background-size: cover;
        background-position: center;
        line-height: 25px;
        height: 650px;
    }
    .section-work{
        height: 800px;
    }
}

@media only screen and (max-width: 1200px){
    .section-features img{
        height: 0px;
    }
    
    .section-rules {
        width: 100%;
        list-style: none;
        height: 1150px;
    }
    
    .resource-bigbox{
        display: block;
        float: left;
        width: 44.4%;
        margin-left: 4%;
        margin-bottom: 4%;
    }
    .resource-box{
        font-size: 100%;
    }
    .five-column{
        font-size: 150%;
        height: 400px;
        width: 100%;
    }
    .five-column h4{
        margin-top: 30px;
    }
    .div-services {
        margin-left: 65px;
        margin-right: 65px;
        line-height: 45px;
    }
    .resource-bigbox-1-3 {
        display: block;
        float: left;
        width: 44.4%;
        margin-left: 4%;
        margin-bottom: 4%;
    }
    .middle {
        margin-left: 27.5%;
    }
    .logo{ 
    width: auto;
    float: left;
    margin-top: 20px;
    }
    .logo-mobile{
        height: 50px;
        width: auto;
        float: left;
        margin-top: 20px;
    }
    .section-competition{
        font-size: 85%;
    }
    .background-services {
        background-image: linear-gradient(rgba(255, 255, 255, 0.53), rgb(255, 255, 255)),   url(https://s3.amazonaws.com/blipwebsite/Services_Banner.png);
        background-size: cover;
        background-position: center;
        line-height: 25px;
        height: 2275px;
    }
    .work-img{
        height: 0px;
    }
}
/* iPad in Portrait Mode: from 1023-1200px */
/*
@media only screen and (max-width: 1200px){
    
    .hero-text-box {
        width: 100%;
        padding: 0 2%;
        font-size: 200%;
        transform: translate(-40%, -50%);
    }
    header {
        background-image: linear-gradient(rgba(85, 85, 85, 0.33), rgba(0, 0, 0, 0.51)), url(img/Front_Page_Ryan.png);
        background-size: cover;
        background-position: right;
        height: 87vh;
    }
    
    .row { padding: 0 2%; }
    body { font-size: 90%;}
    
    h2 { 
        font-size: 220%; 
        line-height: 50px;
    }
    
    .span-1-of-3{ width: 100%;}
    
    .three-column-red{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 6vh;
        min-height: 480px;
        border: 5px solid;
        border-color: #fc4237;
    }
    .three-column-green{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 55vh;
        min-height: 480px;
        border: 5px solid;
        border-color: #76bd1d;
    }
    
    .three-column-blue{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 55vh;
        min-height: 480px;
        border: 5px solid;
        border-color: #1fc2de;
    }
    
    .section-features{
        font-size: 140%;
        line-height: 45px;
    }
    .section-features img{
        height: 0px;
    }
.course-tab {
    text-align: center;
    border-radius: 10px;
    margin-left: 34%;
    height: 70px;
    border: 2px solid;
    width: 30%;
    border-color: #fc4237;
}
    .background-white {
        width: 90%;
        line-height: 25px;
        height: 100vh;
        margin-left: 5%;
    }
    
    .section-testimonials div{
        font-size: 140%;
    }
    
    .section-testimonials h2{
        font-size: 170%;
    }
    
    
    .section-testimonials{
        background-image: linear-gradient(rgba(14, 56, 40, 0.88), rgba(20, 118, 42, 0.79)), url(img/Stage_Screen.jpg);
        background-size: cover;
        background-position: :center;
        height: 80vh;
        color: white;
        background-attachment: fixed;
    }
    
    .col {
	   display: block;
        float:left;
	   margin: 1% 0 6% 1.6%;
    }
    
    .section-youtube{
        height: 120vh;
    }
    
    .resource-bigbox{
        display: block;
        float: left;
        width: 44.4%;
        margin-left: 4%;;
        margin-bottom: 4%;
    }
    
    .section-youtube, h6 h4{
        font-size: 140%;
    }
    
    .grey {
        padding: 0;
        width: 90%;
        margin-left: 5%;
        height: 1760px;
    }
    
    .span-1-of-6{
        width: 32.26%;
    }
} */

/* iPad in Portrait Mode: from 767-1023px */

@media only screen and (max-width: 1024px){
    
    .section-rules {
        background-position: center;
        height: 960px;
    }
    .section-competition,.span-1-of-2{
        width: 100%;
    }
    
    .invisible {
        max-height: 0px;
        visibility: hidden;
    }
    
    
    body { font-size: 80%;}
    section { padding: 60px 0;}
    
    .section-features{
        font-size: 130%;
        line-height: 45px;
    }
    
    .long-copy{
        width: 80%;
        margin-left: 10%;
        line-height: 90%;
}
    .steps-box { margin-top: 10px;}
    .steps-box:last-child {margin-top: 10px;}
    .works-steps {margin-bottom: 40px;}
    .work-step:last-of-type { margin-bottom: 60px;}
    
    .app-screen {width: 50%;}
    
    .icon-small {
        width: 17px;
        margin-right: 5px;
    }
    
    .plan-box {
        width: 100%;
        margin-left: 0%;
    }
    
    .contact-form { 
        width: 90%;
        line-height: 1px;
    }

    header {
        background-image: linear-gradient(rgba(85, 85, 85, 0.33), rgba(0, 0, 0, 0.51)), url(img/Front_Page_Ryan.png);
        background-size: cover;
        background-position: right;
        height: 87vh;
    }
    
    .row { padding: 0 2%; }
    body { font-size: 90%;}
    
    /*h2 { 
        font-size: 220%; 
    }*/
    
    .span-1-of-3{ width: 100%;}
    
    .three-column-red{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 840px;
        border: 5px solid;
        border-color: #fc4237;
        font-size: 160%;
    }
    
    
    .three-column-green{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 840px;
        border: 5px solid;
        border-color: #76bd1d;
        font-size: 160%;
    }
    
    .three-column-blue{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 840px;
        border: 5px solid;
        border-color: #1fc2de;
        font-size: 160%;
    }
    
    .course-tab {
        text-align: center;
        border-radius: 10px;
        margin-left: 34%;
        height: 70px;
        border: 2px solid;
        width: 30%;
        border-color: #fc4237;
    }
    .background-white {
        width: 90%;
        line-height: 25px;
        height: 100px;
        margin-left: 5%;
    }
    
    .section-testimonials div{
        font-size: 140%;
    }
    
    .section-testimonials h2{
        font-size: 170%;
    }
    
    
    .section-testimonials{
        height: 1000px;
    }
    
    .col {
	   display: block;
        float:left;
	   margin: 1% 0 6% 1.6%;
    }
    
    .section-youtube, h6 h4{
        font-size: 140%;
    }
    
    .section-youtube{
        height: 1450px;
    }
    
    .grey {
        padding: 0;
        width: 90%;
        margin-left: 5%;
        height: 1760px;
    }
    
    .span-1-of-6{
        width: 32.26%;
    }
    .div-resource {
        text-align: left;
        margin-left: 25px;
        margin-right: 25px;
        line-height: 25px;
        font-size: 140%;
    }
    .row-features {
        max-width: 90%;
        margin: 0 auto;
        font-size: 110%;
        line-height: 40px;
    }
    .three-column-green{
        height: 830px;
    }
    .three-column-red{
        height: 830px;
    }
    .three-column-blue{
        height: 830px;
    }
    .section-competition{
        font-size: 125%;
        height: 550px;
    }
    .background-services {
        height: 2475px;
    }
    .faq-column {
    width: 100%;
    }
    .community-columns {
    display: unset;
    }
    .community-parts {
    padding: 5%;
    }
    .video-column {
        width: 70%;
    }
    .mission-column {
        width: 70%;
    }
    .section-faq {
        background-size: 100% 100%;
    }
    .goal-text {
        text-align: center;
    }
    .col {
        width: 100%;
        margin: 0 0 4% 0;
    }
    .submit-height {
        max-height: unset;
        height: 82vw;
    }
    .submit-art-img {
        width: 30%;
        margin-left: 38%;
    }
    #submitart {
    width: 40%;
    margin-left: 30%;
   }
   .row-features img {
    width: 60%;
   }
   .footer-column {
       width: 100%;
   }
   .submit-form {
       background-position: 50% 100%;
   }
   .social-col {
    width: 50%;
   }
   .winners-submit-height-winner {
    height: 80vh;
   }
   .winners-div {
    height: unset;
   }
}

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

    .section-testimonials{
        height: 790px;
    }
    body { font-size: 70%;}
    
    .five-column{
        font-size: 220%;
    }
    .section-competition{
        font-size: 125%;
        height: 560px
    }
    .five-column{
        font-size: 195%;
    }
}

/* Small phones to Small Tablets: from 0-767px */
@media only screen and (max-width: 768px){
    .section-testimonials{
        height: 830px;
    }
    .five-column{
        font-size: 190%;
    }
    .section-competition{
        line-height: 90%;
        height: 590px;
    }
    .section-rules{
        line-height: 90%;
        height: 1050px;
    }
    .background-services {
        height: 1905px;
    }
}

@media only screen and (max-width: 767px){
    body { font-size: 16px;}
    section {
         padding: 30px 0;
    }
    .section-competition{
        height: 500px;
    }
    
    .section-rules {
        font-size: 90%;
        height: 500px;
    }
    
    .row-features{
        line-height: 30px;
    }
    
   /* .sticky .mobile-nav-icon { margin-top: 20px; }
    .sticky .mobile-nav-icon i { color: #555; }
    .main-nav { 
        float: left;
        margin-left: 35px;
        margin-top: 25px;
        
    }
    .mobile-nav-icon {
        display: inline-block;

    }
    
    .main-nav li {
        display: block;
    }
    
    .main-nav li a:link,
    .main-nav li a:visited{
        display: block;
        padding: 10px 0;
        border: 0;
        font-size: 100%;
    } */
    
    .row{
        padding: 0 4%;
    }
    
    .hero-text-box { 
        padding: 0 4%; 
        position: absolute;
        width: 1140px;
        top: 350px;
        left: 655px;
        transform: translate(-50%, 50%);
        color: white;    
    } 
    
    h1 { font-size: 180%; }
    /*h2 { font-size: 150%; }*/
    
    .long-copy{
        width: 100%;
        margin-left: 0%;}
    
    .app-screen {
        width: 40%;
        margin-right: 30%;
        text-align: center;
    }
    
    .work-step div {
        height: 40px;
        width: 40px;
        padding: 4px;
        margin-right: 15px;
    }
    
    .steps-box:first-child{
        text-align: center;
    }
    
    .works-steps {margin-bottom: 20px;}
    .work-step:last-of-type { margin-bottom: 20px;}
    .features-img{
        padding-top: 50px;
        height: 0px;
        width 0px;
    }
    .section-friends img{
        width: 80px;
    }
    .background-white {
        width: 90%;
        line-height: 25px;
        height: 440px;
        margin-left: 5%;
    }
    .resource-bigbox{
        display: block;
        float: left;
        width: 100%;
        margin-left: 4%;
        margin-bottom: 4%;
    }
    body { font-size: 64%;
    }
    .resources-showcase{
        width: 100%;
    }
    .three-column-red{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 500px;
        border: 5px solid;
        border-color: #fc4237;
        font-size: 100%;
        line-height: 25px;
    }
    .three-column-green{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 500px;
        border: 5px solid;
        border-color: #76bd1d;
        font-size: 100%;
        line-height: 25px;
    }
    
    .three-column-blue{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 500px;
        border: 5px solid;
        border-color: #1fc2de;
        font-size: 100%;
        line-height: 25px;
    }
    .course-tab {
        text-align: center;
        border-radius: 10px;
        margin-left: 25%;
        height: 60px;
        border: 2px solid;
        width: 50%;
        border-color: #fc4237;
        font-size: 120%;
    }
    .div-services {
        margin-left: 25px;
        margin-right: 25px;
        line-height: 25px;
    }
    .five-column{
        font-size: 160%;
        height: 330px
    }
    .resource-bigbox-1-3 {
        display: block;
        float: left;
        width: 100%;
        margin-left: 4%;
        margin-bottom: 4%;
    }
}

/* Small Phones: from 0-480px */
@media only screen and (max-width: 670px) {
    #navbar-mobile {
        display: inline-block;
    }
    #navbar-desktop {
        display: none;
    }
    #mobile-nav-menu {
    display: unset;
   }
}
@media only screen and (max-width: 630px){
    
    .sticky .mobile-nav-icon { margin-top: 20px; }
    .sticky .mobile-nav-icon i { color: #555; }
    .main-nav { 
        float: left;
        padding-left: 45%;
        margin-top: 25px; 
    }
    .mobile-nav-icon {
        display: inline-block;

    }
    
    .main-nav li {
        display: block;
    }
    
    .main-nav li a:link,
    .main-nav li a:visited{
        display: block;
        padding: 10px 0;
        border: 0;
        font-size: 100%;
    }

}

@media only screen and (max-width: 414px){
    .grey{
        height: 2930px;
    }
    .section-competition{
        height: 650px;
    }
    .section-rules{
        height: 910px;
    }
    
}

@media only screen and (max-width: 412px){
    .section-testimonials{
        height: 850px;
    }
}

@media only screen and (max-width: 375px){
    .resource-bigbox{
        display: block;
        float: left;
        width: 100%;
        margin-left: 4%;
        margin-bottom: 4%;
    }

    .feature-list{
        font-size: 100%;
    }
    .section-testimonials{
        height: 900px;
    }
    .three-column-red{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 500px;
        border: 5px solid;
        border-color: #fc4237;
    }
    .three-column-green{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 500px;
        border: 5px solid;
        border-color: #76bd1d;
    }
    
    .three-column-blue{
        text-align: center;
        border-radius: 15px;
        margin-left: 1%;
        height: 500px;
        border: 5px solid;
        border-color: #1fc2de;
    }
    
    .grey {
        padding: 0;
        width: 90%;
        margin-left: 5%;
    }
    .feature-list{
        font-size: 80%;
    }
    .row-features {
        max-width: 90%;
        margin: 0 auto;
        font-size: 90%;
        line-height: 25px;
    }
    .div-services {
        margin-left: 25px;
        margin-right: 25px;
        line-height: 25px;
    }
    .five-column{
        font-size: 160%;
    }
    .section-rules{
        height: 800px;
    }
    .section-competition{
        height: 500px;
    }
    .section-work{
        height: 900px;
    }
}
@media only screen and (max-width: 360px){
    
    .three-column-red{
        height: 550px;
    }
    .five-column{
        font-size: 130%;
    }
    .section-work{
        height: 940px;
    }
    
}
@media only screen and (max-width: 320px){
    .row-features {
        max-width: 90%;
        margin: 0 auto;
        font-size: 80%;
        line-height: 25px;
    }
    .three-column-red{
        height: 540px;

    }
    .section-testimonials{
        height: 940px;
    }
    .course-tab{
        font-size: 110%;
        height: 63px;
    }
    .section-work{
        height: 1000px;
    }
}
/*
@media only screen and (max-height: 1000px){
    .five-column div{
        height: 50vh;
    }
    .five-column{
        min-height: 260px;
    }
}

@media only screen and (max-height: 800px){

    .five-column div{
        height: 48vh;
    }
}

@media only screen and (max-height: 750px){

    .five-column div{
        height: 55vh;
    }
}

@media only screen and (max-height: 700px){

    .five-column div{
        height: 60vh;
    }
}

@media only screen and (max-height: 600px){

    .five-column div{
        height: 67vh;
    }
}

@media only screen and (max-height: 575px){
    .five-column div{
        font-size: 80%;
        height: 63vh;
    }
}

@media only screen and (max-height: 500px){
    .five-column div{
        height: 220px;
    }
    .five-column{
        height: 300px;
        font-size: 80%;
        line-height: 20px;
    } 
}

@media only screen and (max-height: 500px) and (max-width: 480px){
    .five-column div{
        height: 220px;
    }
    .five-column{
        height: 300px;
        font-size: 120%;
        line-height: 25px;
    }
}
*/