/* css for Madison Cheeatow */

@font-face
{
font-family: open;
src: url("fonts/open/OpenSans-Regular.ttf");
}



@font-face
{
font-family: open-light;
src: url("fonts/open/OpenSans-Light.ttf");
}


/* dispo */
@font-face
{
font-family: open-med;
src: url("fonts/open/OpenSans-Semibold.ttf");
}




@font-face
{
font-family: open-bold;
src: url("fonts/open/OpenSans-Bold.ttf");
}









body { margin: 0px;
       paddding: 0px;
       font-family: open;
       letter-spacing: 0.4px;
      }




select,
option,
input,
button,
textarea { font-family: open;
           outline: none;
           box-shadow: none;
           -webkit-box-shadow: none;
           -moz-box-shadow: none;  
           border-radius: 0px;
           border: none;
           background: none;
           letter-spacing: .4px;
           resize: none;
           -webkit-appearance: none;
           -moz-appearance: none;
           appearance: none; 
          }


div[contenteditable='true']:focus,
input:focus,
button:focus,
textarea:focus { outline: none;
                 background: none;
                 -webkit-appearance: none;
                 -moz-appearance: none;
                 appearance: none; 
                }



:-moz-placeholder,
:-ms-input-placeholder,
::-moz-placeholder,
::-webkit-input-placeholder {  color: lightgrey;  }






.fixed { height: 100%;
         width: 100%;
         position: absolute;
         top: 0px;
         left: 0px;
         }






/* frame */
.frame { height: 100%;
         width: 100%;
         position: absolute;
         top: 0px;
         left: 0px;
         background: white;
         overflow: hidden;
        }




.frame_block { height: auto;
               width: 80%;
               max-width: 820px;
               position: relative;
               margin: 0 auto;
               top: 50%;
               overflow-y: auto;  
               clear: both;
                }




.float_block { height: auto;
               width: auto;
               position: relative;
               display: inline;
             }
        


.left_float { float: left; }

.right_float { float: right;        
               width: 70%;
               margin-top: 22px;
              }




.user_dp { height: 190px;
           width: 190px;
           position: relative;
           border-radius: 50%;
           border: solid 3px rgb(213,213,217);
           padding: 5px;
           background-color: #F9F9F9;
           background-image: url('pics/pic-1-2.jpg');
           background-position: center center;
           background-size: cover;
           background-repeat: no-repeat;
           background-clip: content-box;
           cursor: pointer;
          }



.user_dp:hover { border-color: rgb(255,92,93); }







.block_text,
.block_title { height: auto;
               width: 100%;
               position: relative;
              }



.block_title { font-family: open;
               font-size: 34px;
               color: rgb(111,107,115);
               text-transform: capitalize;
               animation-name: pulse;
                }







/*
.block_title:before { content: "Madison Cheeatow";
                      height: auto; 
                      width: auto;
                      position: relative;
                      color: rgb(111,107,115);
                      -webkit-animation: name_in 1.5s ease;
                      -moz-animation: name_in 1.5s ease;
                      animation: name_in 1.5s ease;
                     }

*/



@-webkit-keyframes name_in { 
    
    
0%      { content: ""; }
6.25%   { content: "M"; }
12.5%   { content: "Ma"; }
18.75%  { content: "Mad"; }
25%     { content: "Madi"; }
31.25%  { content: "Madis"; }
37.5%   { content: "Madiso"; }
43.75%  { content: "Madison"; }
50%     { content: "Madison "; }
56.25%  { content: "Madison C"; }
62.5%   { content: "Madison Ch"; }
68.75%  { content: "Madison Che"; }
75%     { content: "Madison Chee"; }
81.25%  { content: "Madison Cheea"; }
87.5%   { content: "Madison Cheeat"; }
93.75%  { content: "Madison Cheeato"; }
100%    { content: "Madison Cheeatow"; }
    
    
} /* end of keyframes */


@-moz-keyframes name_in { 
    
    
0%      { content: ""; }
6.25%   { content: "M"; }
12.5%   { content: "Ma"; }
18.75%  { content: "Mad"; }
25%     { content: "Madi"; }
31.25%  { content: "Madis"; }
37.5%   { content: "Madiso"; }
43.75%  { content: "Madison"; }
50%     { content: "Madison "; }
56.25%  { content: "Madison C"; }
62.5%   { content: "Madison Ch"; }
68.75%  { content: "Madison Che"; }
75%     { content: "Madison Chee"; }
81.25%  { content: "Madison Cheea"; }
87.5%   { content: "Madison Cheeat"; }
93.75%  { content: "Madison Cheeato"; }
100%    { content: "Madison Cheeatow"; }
    
    
} /* end of keyframes */



@keyframes name_in { 
    
    
0%      { content: ""; }
6.25%   { content: "M"; }
12.5%   { content: "Ma"; }
18.75%  { content: "Mad"; }
25%     { content: "Madi"; }
31.25%  { content: "Madis"; }
37.5%   { content: "Madiso"; }
43.75%  { content: "Madison"; }
50%     { content: "Madison "; }
56.25%  { content: "Madison C"; }
62.5%   { content: "Madison Ch"; }
68.75%  { content: "Madison Che"; }
75%     { content: "Madison Chee"; }
81.25%  { content: "Madison Cheea"; }
87.5%   { content: "Madison Cheeat"; }
93.75%  { content: "Madison Cheeato"; }
100%    { content: "Madison Cheeatow"; }
    
    
} /* end of keyframes */


.block_text { margin-top: 10px;
              color: rgb(111,107,115);
              font-family: open-light;
              font-size: 14px;
              line-height: 24px;
             }



.block_text a { color: rgb(170,170,170); }


.block_text a:hover { color: rgb(255,92,93); }



.bold { font-family: open-med; }





.icons_wrap { height: auto;
              width: 145px;
              position: relative;
              margin-top: 15px;
              overflow-y: auto; 
             }



.soc_icon { height: 20px;
            width: 20px;
            position: relative;
            display: inline;
            float: left;
            margin-left: 15px;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            }


.soc_icon:first-of-type { margin-left: 0px; }



.imdb { width: 40px;
        background-image: url('graphics/imdb-grey.png');
        }


.twitter { background-image: url('graphics/twitter-grey.png'); }

.insta { background-image: url('graphics/insta-grey.png'); }

.vevo { background-image: url('graphics/vimeo-grey.png'); }




.imdb:hover { background-image: url('graphics/imdb-red.png'); }

.twitter:hover  { background-image: url('graphics/twitter-red.png'); }

.insta:hover  { background-image: url('graphics/insta-red.png'); }

.vevo:hover  { background-image: url('graphics/vemeo-red.png'); }









/* pop up wrap */
.pop_up_wrap { height: 100%;
               width: 100%;
               position: fixed;
               top: 0px;
               left: 0px;
               overflow: hidden;
                }



.pop_up_wrap:before { content: "";
                      height: 100%;
                      width: 100%;
                      position: absolute;
                      top: 0px;
                      left: 0px;
                      background: black;
                      opacity: .7;
                      }





.pop_block { height: 500px;
             width: 500px;
             position: relative;
             margin: 0 auto;
             top: 50%;
             margin-top: -250px;
             background-image: url('pics/pic-1.jpg');
             background-size: cover;
             background-position: center center;
             background-repeat: no-repeat;
            }


.pop_block.pic_2 { background-image: url('pics/pic-2.jpg'); }



.close_pop { height: 30px;
             width: 30px;
             position: absolute;
             top: -15px;
             right: -15px;
             background-color: white;
             border-radius: 50%;
             background-image: url('graphics/x-icon.png');
             background-position: center center;
             background-size: 60% auto;
             background-repeat: no-repeat;      
             cursor: pointer;
             }


.close_pop:hover { opacity: .7; }



.grow_in { -webkit-animation: grow_in .25s ease;
           animation: grow_in .25s ease;
           -moz-animation: grow_in .25s ease;
           -ms-animation: grow_in .25s ease;
          }

@-webkit-keyframes grow_in { 
    
0%    { -webkit-transform: scale(0,0); }
50%   { -webkit-transform: scale(1.1,1.1);  }
100%  { -webkit-transform: scale(1,1);  }
    
    
    
} /* end of keyframes */




.shrink { transition: all .2s ease-in-out;
          -webkit-transition: all .2s ease-in-out;
          -moz-transition: all .2s ease-in-out;
          transform: scale(0,0);
          -webkit-transform: scale(0,0);
          -moz-transform: scale(0,0);
        }







/* small screens */

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

.float_block { width: 100%;
               display: block;
               float: none;
              }
    
    
.left_float,
.right_float { width: 100%;
               float: none; 
              }
    
    
.right_float { margin-top: 45px;
               max-width: 450px;
               margin-left: auto;
               margin-right: auto;
              }
    
    
.user_dp { margin: 0 auto;
           height: 150px;
           width: 150px;
          }
    
    
    
.block_title,
.block_text { text-align: center; }
    
    
    
.block_title { font-size: 28px; }
    
    
.icons_wrap { margin-left: auto;
              margin-right: auto;
             }

    
    
.pop_block { height: 300px;
             width: 300px;
             margin-top: -150px;
            }
    
    
    
.nose { height: 22px;
        width: 22px;        
      }
    
    
} /* end of media query */





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

.user_dp { margin: 0 auto;
           height: 100px;
           width: 100px;
          }
    
.block_title { font-size: 24px; }
    
    
} /* end of media query */



/* medium screen */
@media screen and (min-width: 650px) and (max-width: 1000px) {

    
.pop_block { height: 500px;
             width: 500px;
             margin-top: -250px;
            }
    
    
} /* end of media query */







.nose { height: 30px;
        width: 30px;
        position: absolute;
        top: 24%;
        right: 33%;
        background: white;
        opacity: 0;
        border-radius: 50%;
        cursor: pointer;
      }