/*
MEDIA QUERIES FOR COMMON DEVICE BREAKPOINTS

The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it's simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria.


Media screen definition based on ResponsiveDesign.is Media Queries:
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints
*/

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
    aside.controls {
    visibility: hidden;
    display: none;
    }
    
    aside.control-menu-overlay {
    right: 0.45em;
    top: 0.25em;
    opacity: 0.5;
    }
    
    img.animated.swing {
    opacity: 0.75;
    width: 50%;
    height: 50%;
    float: left;
    padding-top: 4em;
    margin-left: -5em;
    }
    img.animated.jello {
    opacity: 0.15;
    width: 50%;
    height: 50%;
    float: right;
    margin-top: -5.5em;
    }
    img.animated.bounce {
    opacity: 0.15;
    width: 15%;
    height: 15%;
    margin: -1em 0 0 5em;
    }
    button.animated.wobble.bacon {
    width: 50%;
    }
    img.animated.wobble.bacon {
    opacity: 0.15;
    width: 50%;
    margin-right: -38em;
    }
    a.animated.zoomIn.twt {
    opacity: 0.15;
    font-size: 400%;
    margin: 0.5em -0.5em 0 0;
    }
}


/* Smartphones (portrait) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
    aside.controls {
    visibility: hidden;
    display: none;
    }
    
    aside.control-menu-overlay {
    right: 0.45em;
    top: 0.25em;
    opacity: 0.5;
    }
    
    img.animated.swing {
    opacity: 0.75;
    width: 50%;
    height: 50%;
    float: left;
    padding-top: 4em;
    margin-left: -5em;
    }
    img.animated.jello {
    opacity: 0.15;
    width: 50%;
    height: 50%;
    float: right;
    margin-top: -5.5em;
    }
    img.animated.bounce {
    opacity: 0.15;
    width: 15%;
    height: 15%;
    margin: -1em 0 0 5em;
    }
    button.animated.wobble.bacon {
    width: 50%;
    }
    img.animated.wobble.bacon {
    opacity: 0.15;
    width: 50%;
    margin-right: -38em;
    }
    a.animated.zoomIn.twt {
    opacity: 0.15;
    font-size: 400%;
    margin: 0.5em -0.5em 0 0;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-device-width : 480px) and (max-device-width : 768px) {
/* Styles */
    aside.control-menu-overlay {
    right: 0.45em;
    top: 0.25em;
    opacity: 0.5;
    }
    
    img.animated.swing {
    opacity: 0.75;
    width: 92px;
    height: 92px;
    float: left;
    padding-top: 4em;
    margin-right: -15em;
    }
    img.animated.jello {
    opacity: 0.15;
    width: 92px;
    height: 92px;
    float: right;
    }
    img.animated.bounce {
    opacity: 0.15;
    width: 92px;
    height: 92px;
    transform: rotate( -45deg );
    margin-left: 7em;
    }
    button.animated.wobble.bacon {
    width: 50%;
    }
    img.animated.wobble.bacon {
    opacity: 0.15;
    margin: 1.5em 0 0 6em;
    }
    a.animated.zoomIn.twt {
    opacity: 0.15;
    font-size: 200%;
    margin: 0.5em -0.5em 0 0;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-device-width : 810px) and (max-device-width : 1440px) {
/* Styles */
    aside.control-menu-overlay {
    right: 0.45em;
    top: 0.25em;
    opacity: 0.5;
    }
    
    img.animated.swing {
    opacity: 0.75;
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 4em;
    margin-right: -15em;
    }
    img.animated.jello {
    opacity: 0.15;
    width: 92px;
    height: 92px;
    float: right;
    }
    img.animated.bounce {
    opacity: 0.15;
    width: 92px;
    height: 92px;
    transform: rotate( -45deg );
    margin-left: 7em;
    }
    button.animated.wobble.bacon {
    width: 50%;
    }
    img.animated.wobble.bacon {
    opacity: 0.15;
    margin: 1.5em 0 0 6em;
    }
    a.animated.zoomIn.twt {
    opacity: 0.15;
    font-size: 200%;
    margin: 0.5em -0.5em 0 0;
    }
}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
    aside.control-menu-overlay {
    right: 1em;
    top: 0.75em;
    opacity: 0.5;
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 1024px) and (max-device-width : 768px) and (orientation : landscape) {
/* Styles */
    /*aside.control-menu-overlay {
    right: 1em;
    top: 0.75em;
    }*/
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
    /*aside.control-menu-overlay {
    right: 1em;
    top: 0.75em;
    }*/
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 36em;
    border: 1px solid white;
    margin-top: -9em;
    }
}

/* iPads Mini (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
    /*aside.control-menu-overlay {
    right: 1em;
    top: 0.75em;
    }*/
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 36em;
    border: 0px solid white;
    margin-top: -9em;
    }
}


/**********
iPad 3
**********/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
    img.animated.swing {
    opacity: 0.75;
    width: 92px;
    height: 92px;
    float: left;
    padding-top: 4em;
    margin-right: -15em;
    }
    img.animated.jello {
    opacity: 0.15;
    width: 92px;
    height: 92px;
    float: right;
    }
    img.animated.bounce {
    opacity: 0.15;
    width: 92px;
    height: 92px;
    transform: rotate( -45deg );
    margin-left: 7em;
    }
    button.animated.wobble.bacon {
    width: 50%;
    }
    img.animated.wobble.bacon {
    opacity: 0.15;
    margin: 1.5em 0 0 6em;
    }
    a.animated.zoomIn.twt {
    opacity: 0.15;
    font-size: 200%;
    margin: 0.5em -0.5em 0 0;
    }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
    /*img.animated.swing {
    opacity: 0.75;
    width: 92px;
    height: 92px;
    float: left;
    padding-top: 4em;
    margin-right: -15em;
    }
    img.animated.jello {
    opacity: 0.15;
    width: 92px;
    height: 92px;
    float: right;
    }
    img.animated.bounce {
    opacity: 0.15;
    width: 92px;
    height: 92px;
    transform: rotate( -45deg );
    margin-left: 7em;
    }
    button.animated.wobble.bacon {
    width: 50%;
    }
    img.animated.wobble.bacon {
    opacity: 0.15;
    margin: 1.5em 0 0 6em;
    }
    a.animated.zoomIn.twt {
    opacity: 0.15;
    font-size: 200%;
    margin: 0.5em -0.5em 0 0;
    }*/
}

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
    aside.control-menu-overlay {
    right: 40px;
    top: 30px;
    opacity: 0.5;
    }
    img.animated.swing {
    opacity: 0.75;
    width: 92px;
    height: 92px;
    float: left;
    padding-top: 4em;
    margin-right: -15em;
    }
    img.animated.jello {
    opacity: 0.15;
    width: 92px;
    height: 92px;
    float: right;
    }
    img.animated.bounce {
    opacity: 0.15;
    width: 92px;
    height: 92px;
    transform: rotate( -45deg );
    margin-left: 7em;
    }
    button.animated.wobble.bacon {
    width: 50%;
    }
    img.animated.wobble.bacon {
    opacity: 0.15;
    margin: 1.5em 0 0 6em;
    }
    a.animated.zoomIn.twt {
    opacity: 0.15;
    font-size: 200%;
    margin: 0.5em -0.5em 0 0;
    }
}

/* Desktops and laptops - Medium Large ----------- */
@media only screen  and (min-width : 1440px) {
/* Styles */
    aside.control-menu-overlay {
    right: 40px;
    top: 30px;
    opacity: 0.5;
    }
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
    aside.control-menu-overlay {
    right: 40px;
    top: 30px;
    }
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
   /* aside.controls {
    visibility: hidden;
    display: none;
    }

    .reveal .control-menu, aside.control-menu {
    right: 0.45em;
    top: 0.5em;
    opacity: 0.5;
    }
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 48em !important;
    border: 0px solid antiquewhite;
    margin-top: -14em;
    }*/
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
    /*aside.controls {
    visibility: hidden;
    display: none;
    }
    
    .reveal .control-menu, aside.control-menu {
    right: 0.45em;
    top: 0.5em;
    opacity: 0.5;
    }
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 46em;
    border: 0px solid white;
    margin-top: -12em;
    }*/
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
    /*aside.controls {
    visibility: hidden;
    display: none;
    }
    
    .reveal .control-menu, aside.control-menu {
    right: 0.45em;
    top: 0.5em;
    opacity: 0.5;
    }
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 46em !important;
    border: 0px solid antiquewhite;
    margin-top: -12em;
    }*/
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
/*    aside.controls {
    visibility: hidden;
    display: none;
    }
    
    .reveal .control-menu, aside.control-menu {
    right: 0.45em;
    top: 0.5em;
    opacity: 0.5;
    }
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 46em !important;
    border: 0px solid antiquewhite;
    margin-top: -12em;
    }*/
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
/*    aside.controls {
    visibility: hidden;
    display: none;
    }
    
    .reveal .control-menu, aside.control-menu {
    right: 0.45em;
    top: 0.5em;
    opacity: 0.5;
    }
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 46em;
    border: 0px solid white;
    margin-top: -12em;
    }*/
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
/*    aside.controls {
    visibility: hidden;
    display: none;
    }
    
    .reveal .control-menu, aside.control-menu {
    right: 0.45em;
    top: 0.5em;
    opacity: 0.5;
    }
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 52em;
    border: 0px solid white;
    margin-top: -15em;
    }*/
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
/*    section.headers.animated.zoomIn.has-dark-background.present {
    height: 46em !important;
    border: 0px solid antiquewhite;
    margin-top: -12em;
    }*/
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
/*    aside.controls {
    visibility: hidden;
    display: none;
    }
    
    .reveal .control-menu, aside.control-menu {
    right: 0.45em;
    top: 0.5em;
    opacity: 0.5;
    }
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 48em !important;
    border: 0px solid antiquewhite;
    margin-top: -14em;
    }*/
}

/* Nexus 5X ----------- */
@media only screen and (min-device-width: 411px) and (max-device-height: 731px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
    /*aside.controls {
    visibility: hidden;
    display: none;
    }
    
    .reveal .control-menu, aside.control-menu {
    right: 0.45em;
    top: 0.5em;
    opacity: 0.5;
    }
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 36em;
    border: 0px solid white;
    margin-top: -7em;
    }*/
}

/* Nexus 6P ----------- */
@media only screen and (min-device-width: 435px) and (max-device-height: 773px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
   /* aside.controls {
    visibility: hidden;
    display: none;
    }
    
    .reveal .control-menu, aside.control-menu {
    right: 0.45em;
    top: 0.5em;
    opacity: 0.5;
    }
    
    section.headers.animated.zoomIn.has-dark-background.present {
    height: 46em;
    border: 0px solid white;
    margin-top: -12em;
    }*/
}