/* LANDSCAPE MOBILE */
@media (min-width: 0px) {
html,body {font-size: 9px; font-size: 3.8vh}
.swiper-pagination-switch {width: 4px; height: 4px; border-radius: 4px; margin: 4px}
.diag {margin-top: 0em;}
.one div.diag {width: 38em}
}

/* PORTRAIT MOBILE */
@media (min-width: 0px) and (orientation : portrait) {
html,body {font-size: 9px;}
.swiper-pagination-switch {width: 4px; height: 4px; border-radius: 4px; margin: 4px}
.one div.diag {width: 30em}
}

/* PORTRAIT TABLET */
@media (min-width: 32em)  { 
html,body {font-size: 10px}
.swiper-pagination-switch {width: 6px; height: 6px; border-radius: 6px; margin: 6px}
.one div.diag {width: 38em}
}

/* PORTRAIT TABLET */
@media (min-width: 38em)  { 
html,body {font-size: 13px}
.swiper-pagination-switch {width: 6px; height: 6px; border-radius: 6px; margin: 6px}
.one div.diag {width: 38em}
}

/* LANDSCAPE TABLET */
@media (min-width: 45em)  { /* IPAD */
html,body {font-size: 16px}
.swiper-pagination-switch {width: 10px; height: 10px; border-radius: 10px; margin: 10px}
.one div.diag {width: 38em}

}




.diag { background-size:cover; -ms-behavior: url(backgroundsize.min.htc); width: 45em; height: 25.625em; margin-top: -3em;}

/* SLIDE 1*/
.one .diag {margin-top: 10em}


/* SLIDE 2*/
.two .diag {background-image:url(images/logo_land.png);background-image:url(images/logo_land.svg), none;}
.logo1 {top:2em ;left:4.5em ; width: ;}
.logo2 {top:2em ;left:10.5em ; width:7em;}
.logo3 {top:2em ;left:25.5em ; width: 6em;}
.logo4 {top:11em ;left:25.5em ; width:5em ;}
.logo5 {top:11em ;left:33em ; width:12em ;}
.logo6 {top:20em ;left:50% ; width: 26em; margin-left: -13em}

/* SLIDE 3*/
.three .diag {background-image:url(images/weather_land.png);background-image:url(images/weather_land.svg),none}
.weather1 {top:2em;left:6.5em;width:;}
.weather2 {top:2em;left:21.5em;width:;}
.weather3 {top:2em;left:36.5em;width:;}
.weather4 {top:11em;left:6.5em;width:;}
.weather5 {top:11em;left:21.5em;width:;}
.weather6 {top:11em;left:36.5em;width:;}
.weather7 {top:20em;left:50%;width:28em; margin-left: -14em}

/* SLIDE 4*/
.four .diag {background-image:url(images/site_land.png);background-image:url(images/site_land.svg),none;}
.mountain1 {top: 6em; left:15em ;}
.net1 {top: 15.5em; left:10.5em; width: 11.5em}
.sheep1 {top: 17em; left: 32em;}
.sheep2 {top: 20em; left:28.5em; width: 17em;}

/* SLIDE 5*/
.five .diag {background-image:url(images/streaming_land.png);background-image:url(images/streaming_land.svg), none}
.chop1 { top:9.5em; left: 1.5em; width: 7.5em;}
.screens1 {top:3.5em; left:36em;}

/* SLIDE 6*/
.six .diag {background-image:url(images/fireworks_land.png);background-image:url(images/fireworks_land.svg), none;}


@media  (orientation : portrait) {
.diag {background-size:33em auto; width: 33em; height: 40.5em;margin-top: -5em}

/* SLIDE 1*/
.one .diag {background-size:45em auto; width: 33em; height: 25.625em; margin-top: 10em;}
.brief {width: 25em ;}

/* SLIDE 2*/
.two .diag {background-image:url(images/logo_port.png);background-image:url(images/logo_port.svg), none}
.logo1 {top:3.5em ;left:5em; width: ;}
.logo2 {top:3.5em ;left:11em; width: 7em ;}
.logo3 {top:3.5em ;left:25.5em; width: 5em;}
.logo4 {top:12.5em ;left:25.5em ; width:5em ;}
.logo5 {top:21.5em ;left:1.5em ; width: 10em;}
.logo6 {top:33.5em ;left: 50% ; width: 20em; margin-left: -10em;}

/* SLIDE 3*/
.three .diag {background-image:url(images/weather_port.png);background-image:url(images/weather_port.svg), none;}
.weather1 {top:3.5em;left:7.5em}
.weather2 {top:3.5em;left:22.5em}
.weather3 {top:21em;left:22.5em}
.weather4 {top:12.5em;left:7.5em}
.weather5 {top:12.5em;left:22.5em}
.weather6 {top:21em;left:7.5em}
.weather7 {top:33em;left:50%;width:28em; margin-left: -14em}

/* SLIDE 4*/
.four .diag {background-image:url(images/site_port.png);background-image:url(images/site_port.svg), none;}
.mountain1 {top: 32em; left:22.5em ;}
.net1 {top: 12.5em; left:1.5em; width: 8.5em}
.sheep1 {top: 17em; left: 20em;}
.sheep2 {top: 20em; left: 13.5em; width: 17em;}

/* SLIDE 5*/
.five .diag {background-image:url(images/streaming_port.png);background-image:url(images/streaming_port.svg), none}
.chop1 { top:11em; left: 3em; width: 7.5em}
.screens1 {top:27.5em; left:21.5em;}

/* SLIDE 6*/
.six .diag {background-image:url(images/fireworks_port.png);background-image:url(images/fireworks_port.svg), none}
}