@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');


body {
    
    background-color: #eee;
    overflow-x: hidden;
}

.names {
    color: white;
    padding-top: .1rem;
    padding-bottom: rem;
    padding-left: 2rem;
    font-size: 15px;
    text-align: left;
    font-family: 'Sofia Sans Condensed', sans-serif;}
.containers{
    height: 70px;
    width: 100%;
    justify-content: space-between;
    display: flex;
    background-color: #ffffff;
}



.containers .social {
    padding-right: 3rem;
    padding-top: 1.5rem;
}
.containers .brand img {
width: 3.2rem;
margin: 1rem;
top: 2rem;
position: absolute;
cursor: pointer;
}

.containers .brand span{
  position: absolute;
  top: 2.9rem;
  margin-left: 5.2rem;
  font-size: 21px;
  color: red;
  font-family: 'Sofia Sans Condensed', sans-serif;   }

    .containers .brand p{
        position: absolute;
        top: 4.8rem;
        font-size: 14px;
        left: 5.2rem;
       color:#646464;

        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          }


          html {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        
        .gh-button {
            display: inline-block;
        }
        
        .gh-button {
            box-sizing: border-box;
            height: 30px;
            font-weight: bold;
            font-size: 8px;
            line-height: 14px;
            padding: 2px 5px 2px 4px;
            color: #333;
            text-decoration: none;
            text-shadow: 0 1px 0 #fff;
            white-space: nowrap;
            cursor: pointer;
            overflow: hidden;
            border-radius: 3px;
        
            padding: 3px 10px 3px 8px;
            font-size: 16px;
            line-height: 22px;
            border-radius: 4px;
            background-color: #eee;
            background-image: linear-gradient(#fcfcfc, #eee);
            border: 1px solid #d5d5d5;
        }
        
        .gh-button:hover,
        .gh-button:focus {
            text-decoration: none;
            background-color: #ddd;
            background-image: linear-gradient(#eee, #ddd);
            border-color: #ccc;
        }
        
        .gh-button:active {
            background: #dcdcdc;
            border-color: #b5b5b5;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15);
        }
        
        .gh-button__icon {
            display: inline-block;
            vertical-align: top;
            width: 20px;
            height: 20px;
            margin-right: 4px;
            background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIxMiAxMiA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxMiAxMiA0MCA0MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMzIsMTMuNGMtMTAuNSwwLTE5LDguNS0xOSwxOWMwLDguNCw1LjUsMTUuNSwxMywxOGMxLDAuMiwxLjMtMC40LDEuMy0wLjljMC0wLjUsMC0xLjcsMC0zLjINCgljLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42DQoJYzAuMi0xLjIsMC43LTIuMSwxLjItMi42Yy00LjItMC41LTguNy0yLjEtOC43LTkuNGMwLTIuMSwwLjctMy43LDItNS4xYy0wLjItMC41LTAuOC0yLjQsMC4yLTVjMCwwLDEuNi0wLjUsNS4yLDINCgljMS41LTAuNCwzLjEtMC43LDQuOC0wLjdjMS42LDAsMy4zLDAuMiw0LjcsMC43YzMuNi0yLjQsNS4yLTIsNS4yLTJjMSwyLjYsMC40LDQuNiwwLjIsNWMxLjIsMS4zLDIsMywyLDUuMWMwLDcuMy00LjUsOC45LTguNyw5LjQNCgljMC43LDAuNiwxLjMsMS43LDEuMywzLjVjMCwyLjYsMCw0LjYsMCw1LjJjMCwwLjUsMC40LDEuMSwxLjMsMC45YzcuNS0yLjYsMTMtOS43LDEzLTE4LjFDNTEsMjEuOSw0Mi41LDEzLjQsMzIsMTMuNHoiLz4NCjwvc3ZnPg0K);
            background-size: contain;
        }


.stream {
    width: 100%;
   text-align: center;
    padding-top: -5rem;
}


.stream input{
    width: 30%;
    height: 37px;
    padding-left: .6rem;
    border: 1.6px solid rgb(232, 37, 37);
    font-size: 13px;
}

.stream input:focus{
 outline: 1.6px solid;
 border-color: white;
 outline-color:rgb(245, 162, 60);
}

.stream #clicknetflix:hover{
   cursor: pointer;
   }

.stream #clicknetflix:focus{
    background-color: rgb(255, 94, 94);
   }
.stream #clicknetflix{
    width: 10%;
    height: 37px;
    font-size: 19px;
    background-color: rgb(232, 37, 37);
    border: 0px;
    color: white;
    font-family: 'Sofia Sans Condensed', sans-serif;}

.player {
   
    width: 100% !important;
   margin-top: 2rem;
   text-align: center;
   align-items: center;
}

.play {
    background-color: rgb(225, 234, 236);
    padding-top: 3rem;
    margin-top: 1rem;
    padding-bottom: 5rem;
}

.info {
    padding: .5rem;
    padding-left: 4.3rem;
}
.info h5 {
    font-family: 'Sofia Sans Condensed', sans-serif;}

.info p{
    color: #535050;
    font-size: 13px;
}

.footer {
    background-color: rgb(240, 240, 240);
    text-align: center;
    padding-top: 1.6rem;
    padding-bottom: 1.3rem;
}
.footer a {
    text-decoration: none;
    color: black;
    font-family: 'Sofia Sans Condensed', sans-serif;}
.footer a:hover {
   
    color: rgb(255, 35, 35);
}

.footer .visitor h1 {
	font-size: 50px;
	margin: 0;
}

.footer .visitor p {
	color: rgba(254, 0, 0, 0.8);
	letter-spacing: 2px;
	margin: 0;
}
        @media only screen and (max-width: 700px) {
         
            .containers{
                
                display: flex;
            }
            .containers .social{

                width: 100%;
                text-align: center;
                padding-left: 2rem;
                margin-top: 4rem;
                background-color: white;
        
            }
            .play {
           
                padding-top: -2rem;
                margin-top: 5rem;
            }

            .play .stream {
               margin-top: -5rem;
            }
input {
    margin-top: 5rem !important;
}
            
               
            }
          
          @media only screen and (max-width: 1135px) {
         

.stream {
    width: 100%;
   text-align: center;
  
}


.stream input{
    width: 45%;
    height: 37px;
    padding-left: .6rem;
    border: 1.6px solid rgb(232, 37, 37);
}
.stream #clicknetflix{
    width: 20%;
    height: 37px;
    padding-left: .6rem;
    border: 1.6px solid rgb(232, 37, 37);
}



#container {
    width:100% !important;
    height: 200px !important;
}



          }



          @media only screen and (max-width: 523px) {
            .stream input{
                width: 70%;
                height: 37px;
                padding-left: .3rem;
                border: 1.6px solid rgb(232, 37, 37);
                font-size: 11px;
            }
            .stream #clicknetflix{
                width: 20%;
                height: 37px;
                padding-left: .6rem;
                border: 1.6px solid rgb(232, 37, 37);
            }
            .info {
                padding: .5rem;
                padding-left: 1.5rem;
            }
               .brand {
    
             text-align: center;
               }
            }