@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,900");
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;

}
.main-container{
    min-height: 100%;
    margin-left: 0px;
    transition : 2s;
}
.mycontent{
    transition: 2s;
    width: 40%;
    position: absolute;
    top: 0px;
    right: -40%;
    background:rgba(255,255,255,0.6);
    height: 100%;
    padding: 20px;
    padding-top: 40px;
    overflow: hidden;
}
.footer{
    color: #8B0D00;
    font-weight: 600;
    padding-bottom:10px;
    width: 100%;
    transition: 2s;
    position: absolute;
    bottom: 5px;
    z-index: 0;
}
.show-content .main-container{
    width: 60%;
    font-size: 0.6em;
}
.show-content .mycontent{
    right: 0%;
}
.show-content .footer{
    width: 60%;
}
body{
    font-size: 1em;
    font-family: 'Source Sans Pro', sans-serif;
    background-image: url('bg.jpg');
   
    background-position-y: 0px;
    background-position-x: 0%;
    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 50s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
.fontsizer{
    font-size: 1em;
}
@-webkit-keyframes MOVE-BG {
    from {
        background-position-x: 0px
    }
    to { 
        background-position-x: -1670px;
    }
 }
h1{
    color: #8B0D00;
    margin-top: 30vh;
    font-size: 3.8em;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1em;
}
.fontsizer h3{
    color: #8B0D00;
   
    font-size: 2.6em;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1em;
}
h2{
    font-size: 2em;
    font-weight: 600;
    
}

.hidden{
    display: none;
}
.slogen{
    position: absolute;
    top: 0px;
    width: 100%;
}
.relative{
    position: relative;
}
.full-width{
    width: 100%;
}
.menu-point{
    cursor: pointer;
    margin-top: 1em;
    margin-bottom: 1em;
}
.menu-point .oi{
    
    color: #8B0D00;
    font-size: 3em;
    display: block;
    width: 2em;
    height: 2em;
    margin-left: auto;
    margin-right:auto;
    border: 2px solid white;
    border-radius: 50%;
    padding: 0px;
    text-align:center;
    line-height: 1.7em;
    background-color: rgba(255,255,255,0);
   

}
.menu-point .text{
    color: rgb(33,37,41);
    display:block;
    font-size: 1.5em;
    font-weight: 600;
    text-align:center;
    
}
.menu-point:hover .oi{
    background-color: rgba(255,255,255,0.5);
}

.menu-point:hover .text{
   color: rgb(255,255,255);
}

#style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #8B0D00;
}
.mycontent>.row{
    position: absolute;
    top: 0px;
    width: calc(100% - 20px);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.mycontent h3{
    margin-top: 40px;
    margin-bottom: 20px;
    background: #8B0D00;
    color: white;
    text-align:center;
    text-transform: uppercase;
    font-weight: 900;
}
.mycontent p:before{
    content: '';
    width: 30px;
    height: 1px;
    display:block;
    background: #8B0D00;
}
.prices{
    font-size: 1.3em;
    margin-top: 20px;
    border-bottom: 1px solid gray;
}
.red{
    color: #8B0D00;
}
.back{
    display: none;
}
@media screen and (max-width : 1200px){
    .fontsizer{
        font-size: 0.8em;
    }

}
@media screen and (max-width : 900px){
    body{
        font-size: 0.8em;
    }
    .fontsizer{
        font-size: 1em;
    }
    .show-content .main-container{
        width: 40%;
        font-size: 0.4em;
    }
    .mycontent{
        width: 60%;
        right: -60%;
    }
    .show-content .mycontent{
        right: 0%;
    }
    .show-content .footer{
        width: 40%;
    }
}

@media screen and (max-width : 768px){
    .col-xs-6{
        width: 50%;
    }
    .show-content .main-container{
        width: 100%;
        font-size: 1em;
    }
    .mycontent{
        z-index:1;
        width: 90%;
        right: -90%;
        background: rgba(255,255,255,1)
    }
    .show-content .mycontent{
        right: 0%;
    }
    .show-content .footer{
        z-index:0;
        width: 100%;
    }
    .back{
        display: block;
    }
    .mycontent .menu-point .oi{
        border-color: #8B0D00;
    }

    
}
@media screen and (max-width : 500px){
    .fontsizer{
        font-size: 0.8em;s
    }
    h1{
        margin-top: 20px;
    }
}
@media screen and (max-height : 500px){
    .col-xs-6{
        width: 33%;
    }
    .fontsizer{
        font-size: 0.5em;s
    }
    h1{
        margin-top: 10px;
    }
}