/*-------------------------------------------------------*/
/*             Responsive Design        
/*-------------------------------------------------------*/
@media screen and (max-width: 1140px) {
   .section1 .intro {width: 100% !important; padding: 0 30px; box-sizing: border-box;}
}
@media screen and (max-width: 1050px) {
   #tabs .frame .left-panel {width: 100% !important; text-align: center;}
   #tabs .frame .right-panel {width: 100% !important; float: none;}
   #tabs .frame .right-panel img {margin: 0 auto; display: block;}
   #tabs .frame .left-panel p {margin-bottom: 30px;}
}
@media screen and (max-width: 1030px) {
    #section2 .top-selector ul {width: 100% !important;}
    #section2 .top-selector ul li {display: block !important; margin: 5px 128px 5px 128px;
    margin-left: 128px !important;}
    .ui-tabs-anchor {display: block !important; margin-top: 4px;}
    .ui-state-active {border: 3px solid #00a0e2;}
    
}
@media screen and (max-width: 1000px) {
    .intro {width: 100% !important; padding: 0 30px; box-sizing: border-box; }
    .fp-section, .fp-slide, .fp-tableCell { height: auto !important; }
    #section3 .frames-container .frame {clear: both; margin-top: 18px !important;
    margin-left: auto !important; margin-right: auto; display: block !important; float: none !important;}
    #section3 .container {width: 100% !important;}
}
@media screen and (max-width: 980px) {
    #section0 .intro {margin-left: 0 !important; left: 0 !important; position: relative !important;}
    #section0 .intro .left-panel {width: 100% !important; text-align: center;}
    #section0 .intro .left-panel p {width: 100% !important;}
    #section0 .box-holder, #section4 .box-holder {float: none !important; clear: both; width: 370px;
    margin: 0 auto; padding-top: 30px;}
    #section1 .intro .left-panel {width: 100% !important; text-align: center;}
    #section1 .intro .left-panel p {width: 100% !important; margin-bottom: 30px;}
    #section1 .intro .right-panel {width: 100% !important; float: none !important;}
    #section1 .intro .right-panel img {margin-left: auto; margin-right: auto; display: block;}
    #tabs .frame {width: 100% !important;}
    #section4 .intro .right-panel {float: none !important; margin:0 auto;}
    #section4 .title {padding: 0 30px;}
}
@media screen and (max-width: 960px) {
   .section1-video-text {float: left !important; width: 100% !important; text-align: center;}
   .section1-video-text p {margin-top: 20px !important; margin-bottom: 40px;}
   .section1 .wistia-video {margin-top: 0 !important; position: relative !important; width: 100% !important; }
}
@media screen and (max-width: 620px) {
   .contact-section .box-holder {width: 100% !important; padding: 0 30px; box-sizing: border-box;}
   .contact-section textarea {width: 94%; padding: 10px 3%; margin-bottom: 10px;}
   .contact-section input[type="text"], .contact-section input[type="email"] {width: 94%; padding: 10px 3%;}
   .contact-section .contact-btn-submit {width: 100%;}
}

@media screen and (max-width: 560px) {
    #section1 .intro .right-panel img {width: 100% !important;}
    #tabs .frame .right-panel img {width: 100% !important;}
    #section2 .top-selector ul li { margin: 5px 12px 5px 12px; margin-left: 12px !important; }
    #section4 .intro .right-panel {width:100% !important;}
    #section4 .intro .right-panel img {width: 100% !important;}
}

@media screen and (max-width: 460px) {
    #section0 .box-holder, #section4 .box-holder {width: 280px !important;}
    .intro {padding: 0 15px;}
    #section0 .box-holder .register-form, #section4 .box-holder .register-form {padding: 15px !important; }
}
@media screen and (max-width: 380px) {
    #section0 .intro .left-panel h1, #section4 .intro .left-panel h1 {font-size: 48px !important;}
}

/*-------------------------------------------------------*/
/*             Responsive Mobile Design       
/*-------------------------------------------------------*/
@media screen and (max-width: 520px) {
   .section1, .section2, .section3, .section4, .small-section {display: block !important;}
   #fullpage {display: none;}
   .signin, .signup, .header {display: none;}
   .section-wrapper {width: 100% !important;}
   .section4-footer-links {background: #555; position: relative !important; margin-top: 60px;}
   .section4-footer-links ul {padding: 20px 0 !important;}
}

