/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}
* {box-sizing:border-box;}






body {background:#111; color:black; font-size:100%; font-family:'Helvetica', Arial, Helvetica, sans-serif; font-stretch:normal; text-rendering:optimizeLegibility !important; -webkit-font-smoothing:antialiased !important; -webkit-text-size-adjust:none;}
img {max-width:100%; display:block;}


.wrapper {width:auto; max-width:1300px; padding:0; margin:0 auto; position:relative; text-align:center;}


.image-with-movie {position:relative; z-index:1;}

.movie {position:absolute; z-index:2; left:90px; top:0px; width:320px; text-align:left;}
.movie:after {content:""; width:115%; height:108%; background-size:100% 100%; position:absolute; z-index:-1; left:-7.5%; top:-3%; background-image:url(img/phone.png); background-repeat:no-repeat;}

.movie video {width:100%; height:auto; border-radius:30px;}

.movie.one {width:20%; left:41.5%; top:22%;}
.movie.two {left:50%; width:18%;}
.movie.three {left:25%; top:0px; width:20%;}
.movie.four {left:21%; top:5.5%; width:58%;}
.movie.four:after {display:none;}
.movie.four video {border-radius:0px; background:black;}

.videoWrapper {position:relative; padding-bottom:56.25%;padding-top:0px; height:0; overflow:hidden;}
	.videoWrapper iframe, .videoWrapper object, .videoWrapper embed {position:absolute;top:0;left:0;width:100%; height:100%;}

.video.landscape {position:absolute; z-index:2; left:5%; top:5px; width:90%; max-width:90%; height:auto; }
.video.landscape iframe {max-width:100%;}

.gifs {position:relative; z-index:1; }
.gif-one {position:absolute; z-index:2; right:9%; top:1%; width:45%; text-align:left;}
.gif-two {position:absolute; z-index:2; left:9%; top:13.5%; width:45%; text-align:left;}
.gif-three {position:absolute; z-index:2; right:9%; top:25%; width:45%; text-align:left;}
.gif-four {position:absolute; z-index:2; left:9%; top:37%; width:45%; text-align:left;}


.radio {position:relative; z-index:1; }
.radio-one, .radio-two {position:absolute; z-index:3; left:8.65%; top:4%; width:23%; height:28%;}
	.radio button { width:100%; height:100%;border:0; background-color:transparent; text-indent:-9999px; }
.radio-two {left:26%; z-index:2;}
	.radio-one button { width:100%; height:100%;border:0; background:transparent; text-indent:-9999px;}
	.radio button{background-size:100px 100px;background-position:center center;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='800' height='800' viewBox='0 0 512 512' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M256 512C114.625 512 0 397.375 0 256 0 114.609 114.625 0 256 0s256 114.609 256 256c0 141.375-114.625 256-256 256zm0-448C149.969 64 64 149.969 64 256s85.969 192 192 192 192-85.969 192-192S362.031 64 256 64zm-64 96l160 96-160 96z' fill-rule='evenodd'/%3E%3C/svg%3E");}
	.radio button.active{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='800' height='800' viewBox='0 0 512 512' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M256 0C114.625 0 0 114.609 0 256c0 141.375 114.625 256 256 256s256-114.625 256-256C512 114.609 397.375 0 256 0zm0 448c-106.031 0-192-85.969-192-192S149.969 64 256 64s192 85.969 192 192-85.969 192-192 192zm-89.6-119.04h64V183.04h-64zm115.2 0h64V183.04h-64z' fill-rule='evenodd'/%3E%3C/svg%3E");}


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

	
	.movie.two {left:49.5%; width:18.5%; top:0px;}
	
	.movie video {border-radius:25px;}

	.videoWrapper {position:relative; padding-bottom:56.25%;padding-top:0px; height:0; overflow:hidden;}
	.videoWrapper iframe, .videoWrapper object, .videoWrapper embed {position:absolute;top:0;left:0;width:100%; height:100%;}
}
@media only screen and (max-width:1024px) {
	.movie video {border-radius:20px;}
	.radio button{background-size:60px 60px;}	
}
@media only screen and (max-width:767px) {
	.movie {background:black; border-radius:10px;}
	.movie video {border-radius:10px;}
	.movie:after {display:none;}
	.radio button{background-size:40px 40px;}
	
}
@media only screen and (max-width:480px) {
	.movie video {border-radius:10px;}
	.radio button{background-size:30px 30px;}
}