@charset "utf-8";
.transition.tr-header.sticky .scroll-nav li a{
    color:grey;
}
#home-overlay{
    /*background-image: url("/assets/images/bg/home.jpg");*/
    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    /* Background image is fixed in the viewport so that it doesn't move when
       the content's height is greater than the image's height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
    /* Set a background color that will be displayed
       while the background image is loading */
    /*background-color: #464646;*/
}
.wow{
    visibility: hidden;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.flipOutX,
.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}
/* Color styles */

.fullscreen-slider-holder .customNavigation a,  .tr-header2 .scroll-nav li.actscroll a, .nav-button span , .tabs-menu li.current , .owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span  , .masonry-filters a.masonry-filter_active , .clr-btn , .scroll-nav li:hover:before , .scroll-nav li.actscroll:before , .custom-skillbar   , .cl-over .overlay , .price , .trans-btn:hover , .color-bg , .owl-theme .owl-controls .owl-page span , .ser-carous-holder  .customNavigation a , .left-column .customNavigation a ,  .cl-toltip:before , .flat-facts .inline-facts:before , .flat-social li:before , .services-holder li:before , .color-separator , #subscribe  .subscribe-button  ,#contact-form input[type="submit"] , .detailst-list li i , .share-icon , .detailst-list li a strong:before , .detailst-list li span strong:before , .fet-carousel .customNavigation a:before  ,  .close-menu , .nav-footer:before , .scroll-nav-btn , .custom-slider-holder  .customNavigation a , .shuffle-button , .showmap:before , .post-tags li:hover a , .tagcloud li:hover a , .pagination a.current-page, .pagination a:hover , .trnsp_btn , .controls button , .tldate , .timeline li .tl-circ  , .filter-button{
    background:#B22222;
}
.policy-box p span , .ci-mail , .twitts li a , .social-links li a:hover  , nav   ul li a:hover , nav a.active , .carous-holder  .owl-theme .owl-controls .owl-nav .owl-next:hover , .carous-holder  .owl-theme .owl-controls .owl-nav .owl-prev:hover , .box-details h1 a  , .masonry-filters a:hover  ,  .inline-facts h6  , .accordion-title a i  , .wht-btn , .test-carousel a span , .services-holder li  i , #menu li a.active , .nav-description p span , .nav-social li a:hover , .resume-head h4 , .fw-testi-header .customNavigation a:hover , .flat-header .scroll-nav li a:hover , #contact-form input[type="submit"]:hover , .big-text span , .post-meta li a , .post-meta li i  , .post-link:hover , .search-submit i , .widget-posts-descr a:hover  , .widget-comments-date strong , .cat-item:hover a , #comments-title span , .tl-date i ,
.subscribe-message.valid i {
    color:#B22222
}
nav span:after {
    border-top-color: #B22222;
}
.trans-btn:hover , .clr-btn {
    border:2px solid #B22222;
}
.tooltip:after {
    border-top:1px  dotted #B22222;
}
@media only screen and  (max-width: 1036px) {
    .scroll-nav li.actscroll a {
        color:#cf2028;}
}
a{
    color:#333;
}
header {
    box-shadow: none;
}
.scroll-nav{
    float:none!important;
    width:auto;
    height:100%;
}
.scroll-nav li a {
    outline: 0;
    /*color: #808080;*/
    color: #FFFFFF;
}
.bg{
    background-color: #f2f2f2;
}
.tr-header {
    border-bottom: none;
}
#bv-logo{
    margin-top:30px;
    /*filter: drop-shadow(4px 2px 3px rgba(0, 0, 0, 0.07));*/
    /*-webkit-filter: drop-shadow(4px 2px 3px rgba(0, 0, 0, 0.07));*/
}

#big-name{
    position: relative;
    height: 100%;
    width: 100%;
}
#brennan-vargas{
    enable-background:new 0 0 622.337 52;
    width: 100%!important;
    height: auto!important;
    top: 0;
    left: 0;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.hero-title-holder {
    position:absolute;
    /*top:40%;*/
    top:33%;
    width:100%;
    z-index:3;
}
/*.popover.snap{*/
/*background-color: initial;*/
/*max-width: initial;*/
/*border: initial;*/
/*border-radius: initial;*/
/*box-shadow: initial;*/
/*padding: 0;*/
/*}*/
/*.popover-content.snap{*/
/*padding: 0;*/
/*}*/
.popover.snap{
    background-color: rgba(0, 0, 0, 0.1);
    max-width: initial;
    border: initial;
    border-radius: initial;
    box-shadow: initial;
    padding: 0;
    border-radius: 5px;
}
.popover-content.snap{
    padding: 8px;
    color: #cf2028;
    font-size: 16px;
}
.tlt {
    /*color: #b8ad9f;*/
    /*color:#cf2028;*/
    color:#ffffff;
    font-size: 64px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
    display:inline-table;
    /*text-shadow: -1px 1px 2px rgba(150, 150, 150, 1);*/
}
.tlt  {
    /*color: #b8ad9f;*/
    color:#B22222;
    text-align:center;
    margin: 20px auto;
    font-size: 2.2em;
}
.front-page-separator {
    display: block;
    height: 2px;
    margin: 10px auto;
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s linear;
    -o-transition: all 3s ease-in-out;
    transition: all 3s linear;
}
sup{font-size: x-small;}
#text-div{
    min-height: 115px;
}
.contact{
    font-size: 3em;
}
.contact > a{
    /*color: #b8ad9f;*/
    /*color:#B22222;*/
    color:#ffffff;
    margin: 10px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.contact > a:hover{
    color: #cf2028;
    text-decoration: none;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.hero-title.container {
    /*min-height: 130px;*/
}
section#about{
    padding-top: 0;
    /*background: url('../images/everything2.jpg') no-repeat center;*/
    background: url('../images/brennan-vargas-2800w-2018-bw-xx2.jpg') no-repeat center;
    font-size: 0;
    line-height: 0;
    background-size: cover;
    -moz-background-size: cover;  /* Firefox 3.6 */
    min-height: 100vh;
    background-position: center center;
    display: flex;
    align-items: center;
}
section#about .content {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 100vh;
}
.v-center {
    position: relative;
    transform: translateY(45%);
}
span.dieforme i{
   margin-right: 20px;
   font-size: 40px;
}
section#projects{
    /*color: #ffffff;*/
    color: #4F453F;
}
section#about p, section#about h1{color:#2d3436;}
#nowplayingimage{
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    max-height: 300px;
}
section#nowplaying{
    transition: all 0.5s ease 0s;
}
#about-text a, .about-color{
    color: #733460;
}
#about-text a:hover{
    color: #4C5E66;
}

.project-panel {
    border: none;
    height: 125px;
    width: 233px;
    margin-left: auto;
    margin-right: auto;
}

.track-info {
    font-size: 23px;
    margin: 15px;
}
#track {
    font-size: 35px;
    font-weight: bold;
    line-height: 45px;
}
.color-test, .skill-color-test, .project-color-test{
    color: grey;
}
.light{
    color: #000000;
}
.dark{
    color:#ffffff;
}

#powered{
    margin-top: 20px;
}
.powered-by{
    color: #555555;
    font-size: 10px;
    line-height: 19px;
}
.powered-by.color-test.dark{
    color: #ECECEC;
}
.powered-by.color-test.light{
    color: #555555;
}
.track-info-container {
    margin-top: 20px;
}
/*------  CSS3 Pseudo Sound Bars  ------------------------------------------------------*/

#bars {
    height: 30px;
    left: 50%;
    margin: -30px 0 0 -20px;
    position: absolute;
    width: 40px;
}

.bar {
    bottom: 0;
    height: 3px;
    position: absolute;
    width: 3px;
    animation: sound 0ms -800ms linear infinite alternate;
}

.bar.color-test{
    background: #666;
}
.bar.color-test.light{
    background: #666;
}
.bar.color-test.dark{
    background: #F6F6F6;
}
@keyframes sound {
    0% {
        opacity: .35;
        height: 3px;
    }
    100% {
        opacity: 1;
        height: 28px;
    }
}
.bar:nth-child(1)  { left: 1px; animation-duration: 474ms;  }

.bar:nth-child(2)  { left: 5px; animation-duration: 433ms; }
.bar:nth-child(3)  { left: 9px; animation-duration: 407ms; }
.bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }
.bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }
.bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }
.bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }
.bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }
.bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }

#album-art{
    width: 300px;
    height: auto;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
#album-art.color-test.light{
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
#album-art.color-test.dark{
    -webkit-box-shadow: 0px 0px 11px 5px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: 0px 0px 11px 5px rgba(255, 255, 255, 0.3);
    box-shadow: 0px 0px 11px 5px rgba(255, 255, 255, 0.3);
}
#stats{
    background-image: url("../images/bg/white-feather.png");
}
#projects{
    background-image: url("../images/bg/shattered.png");
}
.skill-title{
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 20px;
}
.skill{
    border-radius: 8px;
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.33333em;
    margin-right: 10px;
    margin-top: 0.8em;
    padding: 7px 18px;
    text-transform: uppercase;
    width: auto;
}
.sys-skill{
    border: 1px solid #50a9d1;
}
.code-skill{
    border: 1px solid #27ae60;
}
.sec-skill{
    border: 1px solid #c0392b;
}
.skills-title-container{
    margin-bottom: 40px;
}
.skills-header{
    font-size: 35px;
    font-weight: bold;
}
#projects-overlay{
    /*background-color: #b8ad9f;*/
    opacity: 1!important;
}

.project-panel img{
    /*to get better speed disabled this temporarily inlined*/
    /*width: 100%*/
    /*height: auto;*/
}
.project-panel{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.project-panel:hover{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.project-link {
    font-size: 20px;
    /*color: #ffffff;*/
}
.project-link:hover {
    color: #B22222;
}
.overlay-soon{
    position:absolute;
    height: 125px;
    width: 233px;
    z-index:2;
    background:#292929;
    opacity:0.4;
}
#refresh-status {
    height: 30px;
    margin: 10px;
}
#refresh-status > svg {
    height: 100%;
    display: block;
}
#spotify-player-iframe{
    margin-top: 20px;
}
.larger-img{
    width: 400px!important;
}
@keyframes rotating {
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
    transform-origin: 50% 50%;
}
#home{
    /*min-height:100%;*/
    min-width:100%;
}
#homepage-container{
    z-index: 2;
    max-width: 1450px;
}
#scroll-down-button{
    background:#CF2029;
    padding:10px 30px;
    opacity: 0;
    border:none;
}
#arrow-1, #arrow-2, #arrow-3
{
    display: block;
    width: 5px;
    height: 5px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);

    border-right: 2px solid white;
    border-bottom: 2px solid white;
    margin: 0 0 3px 6px;
}

#arrow-1
{
    margin-top: 6px;
}

#arrow-1, #arrow-2, #arrow-3
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
}

#arrow-1
{
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -webkit-animation-direction: alternate;
}

#arrow-2
{
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -webkit-animation-direction: alternate;
}

#arrow-3
{
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    -webkit-animation-direction: alternate;
}

#mouse
{
    height: 21px;
    width: 14px;
    border-radius: 10px;
    transform: none;
    border: 2px solid white;
    top: 170px;
}

#wheel
{
    height: 5px;
    width: 2px;
    display: block;
    margin: 5px auto;
    background: white;
    position: relative;
}

#wheel
{
    -webkit-animation: mouse-wheel 1.2s ease infinite;
    -moz-animation: mouse-wheel 1.2s ease infinite;
}

@-webkit-keyframes mouse-wheel
{
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(6px);
        -ms-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@-moz-keyframes mouse-wheel
{
    0% { top: 1px; }
    50% { top: 2px; }
    100% { top: 3px;}
}

@-webkit-keyframes mouse-scroll {

    0%   { opacity: 0;}
    50%  { opacity: .5;}
    100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
}
@keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
}
.footer-info {
    font-size: 14px;
    margin: 11px;
}
.footer-links a{
    color: #b8ad9f;
    font-size: 30px;
    margin: 10px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.footer-links a:hover{
    color: #cf2028;
    text-decoration: none;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#footer, #footer .row, #footer .container{
    padding: 0;
}
.separator{
    margin: 23px auto 20px;
}
.project-image{
    width: 100%;
    padding: 10px;
    height: auto;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.project-image:hover{
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#mobile-photo{
    display:none;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px ){
    .v-center{
        transform: translateY(30%);
    }
}
@media only screen and (max-width: 768px) {
    /*@media (max-width: 768px){*/
    .scroll-nav {
        display:none;
        position:absolute;
        top:54px;
        left:0;
        width:100%;
        background:#fff;
        box-shadow: 0 0 10px rgba(0,0,0,.1);
    }
    #about-text{
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    #about-text p,
    #about-text a,
    #about-text span {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }
    .hero-title-holder {
        /*position:initial;*/
        /*top: 50%;*/
        /*transform: translateY(-50%);*/
    }
    .full-height {
        /*height: initial;*/
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .skill-title{
        margin: 20px;
    }
    section{
        padding-top: 0;
    }
    header.tr-header.sticky, .to-top{
        /*display: block!important;*/
    }
    section#about {
        background: #FFFFFF!important;
        /*padding-top: 0;*/
        display: block;
    }
    section#about .content {
        display: block;
        min-height: auto;
    }
    section#about p, section#about h1{
        color: #333;
    }
    /*#mobile-photo{*/
        /*!*background: url('../images/brennan-vargas.png') no-repeat 25% 59%;*!*/
        /*!*background: url('../images/everything2.jpg') no-repeat 80% 50%;*!*/
        /*background: url('../images/brennan-vargas-mobile-768w-2016.jpg') no-repeat 40% 50%;*/
        /*!*background-size: cover;*!*/
        /*background-size: cover;*/
        /*min-height: 350px;*/
        /*font-size: 0;*/
        /*width: 100%;*/
        /*line-height: 0;*/
    /*}*/
    #mobile-photo{
        /*background: url('../images/brennan-vargas.png') no-repeat 25% 59%;*/
        /*background: url('../images/everything2.jpg') no-repeat 80% 50%;*/
        background: url('../images/brennan-vargas-mobile-768w-2018.jpg') no-repeat 40% 50%;
        /*background-size: cover;*/
        /*background-size: cover;*/
        /*min-height: 350px;*/
        font-size: 0;
        width: 100%;
        line-height: 0;
        display: block;
    }
    #album-art{
        width: 100%!important;
    }
    #art-container {
        margin-top: 25px;
    }
    .v-center{
        transform: translateY(40%);
    }
    #about-heading{
        margin-top: 10px!important;
    }
    section#about{
        padding: 0px;
    }
    /* Fix for long links and codes */
    #about-text a,
    #about-text .terminal,
    #about-text .open-ubuntu-terminal,
    #ma2 a,
    #about-text strong {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
        display: inline-block;
    }
    /* Ensure container doesn't overflow */
    .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
}
@media only screen and (min-device-width : 375px)
and (max-device-width : 667px)  {
    .v-center{
        transform: translateY(10%);
    }
}