@charset "utf-8";
/* responsive stylesheet */

@media screen and (min-width: 320px) and (max-width: 1244px) {
.inner {width: 90%; margin: 0 5%;}
.inner-50r {width: 90%; margin: 0 5%;}
section.case-studies article {height: 616px; background: url("../images/bg-case-studies-800.png") no-repeat left top;}
section.case-studies article .bubbles {width: 26px; height: 26px;}
section.case-studies article .bubbles:hover {width: 34px; height: 34px;}
section.case-studies article .bubbles.video1-bubble {border: 8px solid #f7ce46; top: 115px; left: 95px;}
section.case-studies article .bubbles.video1-bubble:hover {border: 4px solid #f7ce46;}
section.case-studies article .bubbles.video2-bubble {border: 8px solid #be3cb6; top: 220px; left: 135px;}
section.case-studies article .bubbles.video2-bubble:hover {border: 4px solid #be3cb6;}
section.case-studies article .bubbles.video3-bubble {border: 8px solid #5b2392; top: 55px; left: 280px;}
section.case-studies article .bubbles.video3-bubble:hover {border: 4px solid #5b2392;}
section.case-studies article .bubbles.video4-bubble {border: 8px solid #5b2392; top: 115px; left: 300px;}
section.case-studies article .bubbles.video4-bubble:hover {border: 4px solid #5b2392;}
section.case-studies article .bubbles.video5-bubble {border: 8px solid #005859; top: 135px; left: 350px;}
section.case-studies article .bubbles.video5-bubble:hover {border: 4px solid #005859;}
section.case-studies article .bubbles.video6-bubble {border: 8px solid #be3cb6; top: 80px; left: 410px;}
section.case-studies article .bubbles.video6-bubble:hover {border: 4px solid #be3cb6;}
section.case-studies article .bubbles.video7-bubble {border: 8px solid #f8ce48; top: 200px; left: 540px;}
section.case-studies article .bubbles.video7-bubble:hover {border: 4px solid #f8ce48;}
section.case-studies article .bubbles.video8-bubble {border: 8px solid #f8ce48; top: 145px; left: 570px;}
section.case-studies article .bubbles.video8-bubble:hover {border: 4px solid #f8ce48;}
}

@media screen and (min-width: 320px) and (max-width: 1044px) {
}

@media screen and (min-width: 320px) and (max-width: 944px) {
.col2 {float: left; width: 100%;}
.col3 {float: left; width: 100%;}
.col3-span2 {float: left; width: 100%;}
.col4 {float: left; width: 25%;}
.col4-span3 {float: left; width: 75%;}
.col5 {float: left; width: 50%;}
.col5-span2 {float: left; width: 100%;}
.col5-span3 {float: left; width: 100%;}
.col5-span4 {float: left; width: 100%;}
.col6 {float: left; width: 50%;}
section.intro aside img {max-width: 100%; width: auto; height: auto;}
section.prizes aside {margin-left: 0px; min-height: auto;}
section.prizes article {width: calc(100% - 100px); margin-bottom: 50px;}
section.quiz article form input[type=text] {width: calc(100% - 7px);}
section.quiz article form select {width: calc(100% - 7px);}
section.quiz article form textarea {width: calc(100% - 7px);}
footer ul {float: left; margin-top: 25px;}
footer ul li {float: left; margin-left: 0px; margin-right: 25px;}
}

@media screen and (min-width: 320px) and (max-width: 844px) {
.col2 {float: left; width: 100%;}
.col3 {float: left; width: 100%;}
.col3-span2 {float: left; width: 100%;}
.col4 {float: left; width: 100%;}
.col4-span3 {float: left; width: 100%;}
.col5 {float: left; width: 100%;}
.col5-span2 {float: left; width: 100%;}
.col5-span3 {float: left; width: 100%;}
.col5-span4 {float: left; width: 100%;}
.col6 {float: left; width: 100%;}
.no-respond {display: none;}
section.case-studies article {height: 416px; background: url("../images/bg-case-studies-500.png") no-repeat left top;}
section.case-studies article .bubbles {width: 16px; height: 16px;}
section.case-studies article .bubbles:hover {width: 22px; height: 22px;}
section.case-studies article .bubbles.video1-bubble {border: 5px solid #f7ce46; top: 75px; left: 60px;}
section.case-studies article .bubbles.video1-bubble:hover {border: 2px solid #f7ce46;}
section.case-studies article .bubbles.video2-bubble {border: 5px solid #be3cb6; top: 130px; left: 80px;}
section.case-studies article .bubbles.video2-bubble:hover {border: 2px solid #be3cb6;}
section.case-studies article .bubbles.video3-bubble {border: 5px solid #5b2392; top: 30px; left: 180px;}
section.case-studies article .bubbles.video3-bubble:hover {border: 2px solid #5b2392;}
section.case-studies article .bubbles.video4-bubble {border: 5px solid #5b2392; top: 70px; left: 185px;}
section.case-studies article .bubbles.video4-bubble:hover {border: 2px solid #5b2392;}
section.case-studies article .bubbles.video5-bubble {border: 5px solid #005859; top: 75px; left: 210px;}
section.case-studies article .bubbles.video5-bubble:hover {border: 2px solid #005859;}
section.case-studies article .bubbles.video6-bubble {border: 5px solid #be3cb6; top: 40px; left: 260px;}
section.case-studies article .bubbles.video6-bubble:hover {border: 2px solid #be3cb6;}
section.case-studies article .bubbles.video7-bubble {border: 5px solid #f8ce48; top: 120px; left: 330px;}
section.case-studies article .bubbles.video7-bubble:hover {border: 2px solid #f8ce48;}
section.case-studies article .bubbles.video8-bubble {border: 5px solid #f8ce48; top: 90px; left: 360px;}
section.case-studies article .bubbles.video8-bubble:hover {border: 2px solid #f8ce48;}
section.case-studies article .overlays {display: none; width: 200px; height: 200px; top: 200px; left: 0%;}
section.case-studies article .overlays img {width: 176px; height: 176px;}
section.case-studies article .overlays .name-holder {left: 170px;}
section.case-studies article .overlays .name-holder h3 {font-size: 1.5em;}
section.case-studies article .overlays .name-holder h4 {font-size: 1.1em; line-height: 140%;}
section.case-studies article .overlays.video1-overlay .name-holder h3 {width: 160px;}
section.case-studies article .overlays.video1-overlay .name-holder h4 {width: 200px;}
section.case-studies article .overlays.video2-overlay .name-holder h3 {width: 180px;}
section.case-studies article .overlays.video2-overlay .name-holder h4 {width: 200px;}
section.case-studies article .overlays.video3-overlay .name-holder h3 {width: 170px;}
section.case-studies article .overlays.video3-overlay .name-holder h4 {width: 180px;}
section.case-studies article .overlays.video4-overlay .name-holder h3 {width: 175px;}
section.case-studies article .overlays.video4-overlay .name-holder h4 {width: 180px;}
section.case-studies article .overlays.video5-overlay .name-holder h3 {width: 170px;}
section.case-studies article .overlays.video5-overlay .name-holder h4 {width: 150px;}
section.case-studies article .overlays.video6-overlay .name-holder h3 {width: 155px;}
section.case-studies article .overlays.video6-overlay .name-holder h4 {width: 185px;}
section.case-studies article .overlays.video7-overlay .name-holder h3 {width: 165px;}
section.case-studies article .overlays.video7-overlay .name-holder h4 {width: 165px;}
section.case-studies article .overlays.video8-overlay .name-holder h3 {width: 165px;}
section.case-studies article .overlays.video8-overlay .name-holder h4 {width: 185px;}
}

@media screen and (min-width: 320px) and (max-width: 644px) {
.col7 {float: left; width: 100%;}
section.quiz article {width: 100%; padding: 0;}
section.quiz aside {width: 100%; padding: 0;}
}

@media screen and (min-width: 320px) and (max-width: 444px) {
section.case-studies article .overlays {display: none; width: 160px; height: 160px; top: 200px; left: 0%;}
section.case-studies article .overlays img {width: 136px; height: 136px;}
section.case-studies article .overlays .name-holder {left: 130px;}
section.case-studies article {height: 416px; background: url("../images/bg-case-studies-500.png") no-repeat left -40px top;}
section.case-studies article .bubbles {width: 16px; height: 16px;}
section.case-studies article .bubbles:hover {width: 22px; height: 22px;}
section.case-studies article .bubbles.video1-bubble {border: 5px solid #f7ce46; top: 75px; left: 20px;}
section.case-studies article .bubbles.video1-bubble:hover {border: 2px solid #f7ce46;}
section.case-studies article .bubbles.video2-bubble {border: 5px solid #be3cb6; top: 130px; left: 40px;}
section.case-studies article .bubbles.video2-bubble:hover {border: 2px solid #be3cb6;}
section.case-studies article .bubbles.video3-bubble {border: 5px solid #5b2392; top: 30px; left: 140px;}
section.case-studies article .bubbles.video3-bubble:hover {border: 2px solid #5b2392;}
section.case-studies article .bubbles.video4-bubble {border: 5px solid #5b2392; top: 70px; left: 145px;}
section.case-studies article .bubbles.video4-bubble:hover {border: 2px solid #5b2392;}
section.case-studies article .bubbles.video5-bubble {border: 5px solid #005859; top: 75px; left: 170px;}
section.case-studies article .bubbles.video5-bubble:hover {border: 2px solid #005859;}
section.case-studies article .bubbles.video6-bubble {border: 5px solid #be3cb6; top: 40px; left: 260px;}
section.case-studies article .bubbles.video6-bubble:hover {border: 2px solid #be3cb6;}
section.case-studies article .bubbles.video7-bubble {border: 5px solid #f8ce48; top: 120px; left: 290px;}
section.case-studies article .bubbles.video7-bubble:hover {border: 2px solid #f8ce48;}
section.case-studies article .bubbles.video8-bubble {border: 5px solid #f8ce48; top: 90px; left: 320px;}
section.case-studies article .bubbles.video8-bubble:hover {border: 2px solid #f8ce48;}
}