/*Repeatedly use important because we don't have direct access to the external CSS, so we force the changes in.*/

/*This CSS doesn't seem to work with some of the media queries. Homepage or otherwise*/


/*these don't work here. Add To Head
.homepage .home-banner p 
.homepage .home-banner h2
.homepage .home-banner .aside_text
.homepage #section_0 .owl-stage  header
*/



@media screen and (min-width: 768px) {
    .homepage #content .home-three-box .box {
        width: 32% !important;
        margin-right: auto; 
    }
}


.scroll-down{
    visibility:hidden;
}

body{
    font-family: "Montserrat",sans-serif ;
    overflow-x:hidden;
}


.youtube-video{
          top:0;
          left:0;
          width:560px; 
          height:315px;
		}

@media only screen and (orientation: portrait) {
        .tvi-logo{
        width:50% !important;
    }
}


@media screen and (max-width:1445px){
    .youtube-video{
        max-width:560px;
        max-height:315px;
    }
}
    

.navbar{
    z-index:1000 !important;
}

.c-form__section h2 {
font-size:1.3em;
    
}

.contact-form, .form-title .title {
font-size:1.3em;
}

.form-button {
    text-align:left;
}



.home-three-box .box {
    width: inherit;
    margin: 0px;
}


.section_Boxes.boxCount-3 .box {
    width: 30%;
    margin: inherit inherit inherit inherit !important;
}



/*An Attempt to get rid of the periods that show up in these boxes. Part of the Home Page*/
.home-three-box .box .learnmore .button{
    font-size: 0;
    color: transparent;
     z-index: -9999;
     
}

/*dunno*/
tent .section_Boxes.boxCount-3 .box{
    min-height:100px;
}

.home-three-box .box .c-section-boxes__inner-box{
    border-radius: 0px!important;
}

#section_0 #box1-text{
    visibility: hidden;
}

.contact-form .title{
    text-align:left;
}
.header{
    position:relative;
}

/*Hacky. I move some screens up so we can see all the words on different mobile devices.*/
/*fixed income specialists section on kindle Fire*/
@media only screen and (max-width: 900px) 
{
    .homepage #section_0 #box1-text{
        margin-top: -60px !important;
    }
}

/*For whatever reason, this is the only rule that didn't work. Doesn't even show up in the inspector...*/
/*I updated the kindle fire rule(above) to overlap*/
@media only screen and (min-width: 845x)  and (max-width: 847px) 
{
    .homepage #section_0 #box1-text{
        margin-top: -70px !important;
    }
}

/*fixed income specialists on devices like galaxy S9 and Iphone horizontal*/
@media only screen and (min-width: 639x)  and (max-width: 641px) 
{
    .homepage #section_0 #box1-text{
        margin-top: -70px !important;
    }
}

/*fixed income specialists on devices like galaxy S9 and Iphone horizontal*/
@media only screen and (min-width: 730px)  and (max-width: 741px) 
{
    .homepage #section_0 #box1-text{
        margin-top: -70px !important;
    }
    
    #video-player-1{
        margin-top: -50px;
    }
}

/*fixed income specialists section on iPad*/
@media only screen and (min-width: 741px) and (max-width: 768px) 
{
    .homepage #section_0 #box1-text{
        margin-top: -70px !important;
    }
    
    #section_0{
        margin-left:0%;
    }
    
    #video-player-1{
        margin-top: 0px !important;
    }
}


/*fixed income specialists section on iPhone X*/
@media only screen and (min-width: 811px) and (max-width: 812px) 
{
    .homepage #section_0 #box1-text{
        margin-top: -70px !important;
    }
    
    /*moves the inkblot video up so we can see the TVI text*/
    #section_0{
        width:80% ;
        margin-left:10%;
    }
    
    #video-player-1{
        margin-top: -50px;
    }
}
/*fixed income specialists section on iPhone XR*/
@media only screen and (min-width: 895px) and (max-width: 896px) 
{
    .homepage #section_0 #box1-text{
        margin-top: -70px !important;
    }
    /*moves the inkblot video up so we can see the TVI text*/
    #section_0{
        width:80% ;
        margin-left:10%;
    }
    
    #video-player-1{
        margin-top: -50px;
    }
}

/*fixed income specialists section on 4k*/
@media only screen and (max-width: 989px) 
{
    .scroll-down{
        visibility:hidden !important;
    }
}



@media only screen and (min-width: 990px) 
{
    
    
    #video-player-1{
        object-fit: cover;
        height: calc(100vh - 78px) !important;
        margin: 0 auto;
        min-width:990px;
        min-height:385px;
    }
    #video-player-2{
        object-fit: cover;
        height: calc(100vh - 78px) !important;
        margin: 0 auto;
        min-width:990px;
        min-height:385px;
    }
    .homepage .home-banner .scroll-down {
        height: 35px;
        position: absolute !important;
    }
    
    .homepage #section_0 .section_SideBySide .container .sidebyside-wrapper{
        height: calc(100vh - 78px) !important;
    }
    
    .homepage #section_0  #box1-image{
        height: calc(100vh - 78px) !important;
        min-height:385px;
    }
    
    header{
        height:78px;
    }

}

/*Manage the video. We want the 2nd video centered when we overflow so we can see the center*/
/*We don't do that to the first video because we would cut off the words. */
/*Not possible to have words on that video, have it snap into place on all screens to show the */
/*scroll icon, always show all the words*, and not have part of the video cut off like as requested*/
@media (min-aspect-ratio: 16/9) {
    #video-player-1 {
    height: calc(100vh - 78px) !important; /* actually wider than viewport */
    }
}

@media (min-aspect-ratio: 16/9) {
    #video-player-2 {
        height: calc(100vh - 78px) !important; /* actually wider than viewport */
    }
}
@media (max-aspect-ratio: 16/9) {
    #video-player-2 {
        width: 100%; 
        height: auto;/* actually taller than viewport */
    }
}

.homepage .section_SideBySide .container .sidebyside-wrapper{
    overflow:hidden;
}

/*fixed income specialists section tiny screens*/
@media only screen and  (max-width: 344px)
{
    .homepage #section_0 #box1-text{
        margin-top: -60px !important;
    }
}

.contactUsDetailsWidth {
    min-width: 290px;
}

.contactUsDetailsWidth h2{
    text-align: left !important;
}

.owl-wrapper,
.owl-item{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
}