body {
	font-family: 'Open Sans', sans-serif;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-font-smoothing: antialiased !important;
	color: #666;
	font-size: 1.5em;
}

a {
    color: #8e7aa3;
    text-decoration: none;
}

a:focus, a:hover {
    color: #8e7aa3;
    text-decoration: underline;
    outline: none;
}

h1, h2, h3 {
	font-family: 'Lato', sans-serif;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-font-smoothing: antialiased !important;
}

h1 {
    font-size: 2em;
    font-weight: 700;
}


/*video { 
    width: 100%; 
    height: 100%; 
}*/

.video1-dimensions, .video2-dimensions, .video3-dimensions, .video4-dimensions {
   /* width: 640px;
    height: 360px;*/
    margin: auto;
}


div#video1, div#video2, div#video3, div#video4 {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

:focus {
    outline: none;    
}

.btns {
    position: absolute;
    cursor: pointer;
}

#btnNote {
    top: 25%;
    width: 53%;
    height: 65%;
    left: 0;
    /*background-color: #000;*/
}

#btnIpad {
    top: 43%;
    width: 16%;
    height: 40%;
    left: 61%;
    /*background-color: #000;*/
}

#btnAndroid {
    top: 45%;
    width: 12%;
    height: 40%;
    right: 10%;
    /*background-color: #000;*/
}

#bloco1, #bloco2, #bloco3, #bloco4 {
    height: 312px;
}

#bloco2, #bloco3, #bloco4 {
     display: none;   
}

#menu {
    display: none;
    align-items: center;
    justify-content: center;
    background-color: #000000e8;
    width: 100%;
    height: 100%;
    position: absolute;

    opacity: 0;
    transition: all .8s ease-in-out;
}

#menu p {
    
    display: inline;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
   
}

.video-js {
    display: flex !important;
}


#btnVoltar {
    background-color: #252525;
    padding: 10px 20px;
    border-radius: 30px;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    transition: all .5s ease-in-out;
    border: 2px solid #000000;
    box-shadow: 0px 0px 0px 2px #252525;
}

#btnVoltar:hover {
   /*transform: scale(1.03);*/
  /* border: 1px solid #000000;
   box-shadow: 0px 0px 10px 2px #ffffff52;*/
   background-color: #3c3c3c;
}   

#btnVoltar p {
    margin-bottom: 0;
    font-size: 9px !important;
    margin-left: 15px !important;
    color: #a0a0a0 !important;   
}

svg {
    width: 14px;
}



.video-js .vjs-time-control {
    display: block !important;
}
.video-js .vjs-remaining-time {
    display: none !important;
}

#video1 > div.vjs-control-bar > div.vjs-current-time.vjs-time-control.vjs-control, 
#video2 > div.vjs-control-bar > div.vjs-current-time.vjs-time-control.vjs-control, 
#video3 > div.vjs-control-bar > div.vjs-current-time.vjs-time-control.vjs-control, 
#video4 > div.vjs-control-bar > div.vjs-current-time.vjs-time-control.vjs-control {
    padding-left: 0;
    padding-right: 0;
}

#video1 > div.vjs-control-bar > div.vjs-duration.vjs-time-control.vjs-control, 
#video2 > div.vjs-control-bar > div.vjs-duration.vjs-time-control.vjs-control,
#video3 > div.vjs-control-bar > div.vjs-duration.vjs-time-control.vjs-control,
#video4 > div.vjs-control-bar > div.vjs-duration.vjs-time-control.vjs-control {
    padding-left: 0;
}

.vjs-volume-control.vjs-control.vjs-volume-horizontal {
    padding-right: 1em !important;
}


/* --------------- MEDIAS ---------------------- */

@media (max-width: 1024px) {   
}

@media (max-width: 992px) {
}

@media (max-width: 980px) {
}

@media (max-width: 768px) {
}

@media (max-width: 736px) {
    /*video { height: 100%; width: 100%; margin-bottom: 30px; }*/
}

@media (max-width: 480px) { 
}

@media (max-width: 375px) {
}

@media (max-width: 360px) {
}

@media (max-width: 320px) {
}