@import url('https://fonts.googleapis.com/css?family=Anton|Open+Sans+Condensed:300|Roboto');
/*General-use classes */
    .blueText{
        color: #0072FF;
    }
    
    .navHeader{
        text-align: center;
    }
    
    #mobileToggle{

        font-size: 28px;
        position: absolute;
        left: 5%;
        top: 20%;
    }
    

    
    .whiteText{
        color: white;
    }

/*Navigation bar */
.site-header{
	background-color: white;
	
}



.site-header .navigation a{
	color: #7ab8e8;
	font-family: 'Roboto', sans-serif;
}

.site-header .navigation a:hover{
	text-decoration: none;
	color: #004BA8;
}

#phoneNumberNav{
    color: #7ab8e8;
}




/*Allows for overlay */
.jumbotron-fluid{
	position: relative;
    
}

/*Background video at beginning of page */
#mainVideo{
  	width: 100%;
}

/*Blue half of video overlay which is seperate from all other overlay aspects */
#color-blue-transparent{
	position: absolute;
	left: 0;
	top: 0;
	background-color: blue;
	background-color: rgba(0, 83, 186, 0.6);
	height: 99.3%;
	width: 50%;

}




/*The text overtop of the continuous video */
#videoOverlayText{
	position: absolute;
	left: 50%;
	top: 35%;
	transform: translate(-50%, -50%);
	color: white;
	text-align: center;
	text-shadow: 1px 1px 10px rgba(0,0,0,0.7);
}


/*Line that is on both the What section and video overlay*/
#transitionLine1{
	position: absolute;
	left: 49.9%;
	bottom: -3%;
	border-right: 4px solid blue;
	border-right: 4px solid rgba(0, 114, 255, 1);
	height: 15%;
}

#demoButtonJumbo{
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%, -50%);
    	border-radius: 28px;
    	font-size: 24px;    
}




@media only screen and (min-width: 1000px ){
     #mobileToggle{
        display: none;
    }
    /*Sets the size and fonts for all headers */
    .header{
        font-size: 42px;
        font-family: 'Anton', sans-serif;
    }

    .altHeader{
        font-size: 50px;
        font-family: 'Open Sans Condensed', sans-serif;
    }
    
    /* is only used in the jumbotron and is the larger section 'Glass ERP Software' */
    #subHeader{
        font-family: 'Anton', sans-serif;
        font-size: 45px;
    }

    
    /* Transition Button in beginning jumbotron/replaying video overlay */
    #transitionButton{
    	position: absolute;
    	left: 50%;
    	top: 80%;
    	transform: translate(-50%, -50%);
    	border-radius: 28px;
    	color: white;
        padding: 15px 10px 15px 10px;
    	font-size: 24px;
    }
    

    
    #transitionButton:hover{
        color: #D8D8D8;
        border: 1px solid #D8D8D8;
        background-color: transparent;
    }
    
    #whatImg{
        position: absolute;
        left: 25%;
        top: 20%;
    }
    
        /*blue border box behind image */
        #item {
          width: 425px;
          height: 425px;
          border: 5px solid #009DFF;
          position: absolute;
          left: 15%;
          top: 0;
        }
        
    #whatDescription{
        font-size: 24px;
    }
    
    .icon{
        font-size: 120px;
    }
    
    
    /* Images in Carousel made responsive to large screen */
    .testimonialImages{
        height: 200px;
        width: 200px;
    }
    
    .quote1, .quote2 {
        font-size: 20px;
    }
    
    
    
}

@media only screen and (min-width: 1000px) and (max-width: 1500px){
     #mobileToggle{
        display: none;
    }
    
    #whatImg{

        top: 3rem;
        height: 300px;
    }
    
        /*blue border box behind image */
        #item {
          width: 300px;
          height: 300px;
          border: 5px solid #009DFF;
          position: absolute;
          left: 15%;
          top: 0;
        }
}

@media only screen and (max-width: 1000px) and (min-width: 800px){
    
    #mobilToggle{
        display: none;
    }
    
    /*Sets the size and fonts for all headers */
    .header{
        font-size: 32px;
        font-family: 'Anton', sans-serif;
    }

    .altHeader{
        font-size: 38px;
        font-family: 'Open Sans Condensed', sans-serif;
    }
    
    /* is only used in the jumbotron and is the larger section 'Glass ERP Software' */
    #subHeader{
        font-family: 'Anton', sans-serif;
        font-size: 45px;
    }

    
    /* Transition Button in beginning jumbotron/replaying video overlay */
    #transitionButton{
    	position: absolute;
    	left: 50%;
    	top: 80%;
    	transform: translate(-50%, -50%);
    	border-radius: 28px;
    	color: white;
        padding: 15px 10px 15px 10px;
    	font-size: 24px;
    }
    
    #transitionButton:hover{
        color: #D8D8D8;
        border: 1px solid #D8D8D8;
        background-color: transparent;
    }
    
    .icon{
        font-size: 120px;
    }
    
    #whatImg{
        display: none;
    }
    
        /*blue border box behind image is hidden on small devices */
        #item {
          display: none;
        }
    
    #whatDescription{
        font-size: 16px;
    } 
    
    /* Images in Carousel made responsive to medium screen */
    .testimonialImages{
        display: none;

    }
    
    .quote1, .quote2{
        font-size: 12px;
    }


}

@media only screen and (max-width: 800px){
    
    #demoButtonJumbo{
        display: none;
    }
    
        #menuLogo{
        padding-left: 20%;
    }
    
    /* is only used in the jumbotron and is the larger section 'Glass ERP Software' */
    #subHeader{
        font-family: 'Anton', sans-serif;
        font-size: 24px;
    }
    
    #whatImg{
        display: none;
    }
    
    #item{
        display: none;
    }
    
    #whatDescription{
        font-size: 16px;
    }
    
    #picSection{
        display: none;
    }
    
    #transitionButton{
        display: none;
    }
    
    /*Icons in teh Why section */
    .icon{
        font-size: 50px;
    }
    
    /*Sets the size and fonts for all headers */
    .header{
        font-size: 20px;
        font-family: 'Anton', sans-serif;
    }

    .altHeader{
        font-size: 24px;
        font-family: 'Open Sans Condensed', sans-serif;
    }
    
    /* Images in Carousel made responsive to small screen */
    .testimonialImages{
        display: none;
    }
    
    .quote1, .quote2{
        display: none;
    }
    
    /*Hide whyButton on small screen */
    
    #whyButton{
        display: none;
    }


}

/*What is GlassTrax section */
#whatSection{
    padding: 5%;
}





/*Why go with us? Section */


#whySection{
    margin: 0;
    padding: 0;
    margin-top: 2%;
    z-index: 1;
}

#whySection #whySect1, #whySection #whySect2{
    padding-bottom: 5%;
}

#whyHeader{
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    z-index: 1000;
}

#whySect1{
    background-color: #FCFCFC;
    padding-top: 100px;
}

#whySect2{
    background-color: #DBDBDB;
    padding-top: 100px;
}

#whyButton{
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    z-index: 1000;
    bottom: 2%;
}

.icon{
    
    color: #0072FF;
    
}

/*Carousel CSS */




.carousel-control-next-icon:after
{
  content: '>';
  font-size: 24px;
  color: black;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 24px;
  color: black;
}

.testimonialImages{
    border-radius: 50%;
}

.quote2{
    color: black;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: white;
    background-color: rgba(255,255,255, 0.8);
    border-radius: 8px;
}

.quote1{
    color: white;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: black;
    background-color: rgba(0,0,0, 0.8);
    border-radius: 8px;
}

.carouselSmallBtn{
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(-50%);
}

#demoSection{
    background-image: url('../res/circuit.png');
    background-repeat: no-repeat;
    margin:0;
    padding: 5%;
}





#footer{
    background-color: #003A82;
    margin: 0;
    padding-top: 1%;
    padding-bottom: 1%;

}


.footerMenu{
    margin-top: 2%;
}

.footLink{
    color: white;
}

.footLink:hover {
    text-decoration: none;
    color: white;
}

.footerIconContainer{
    display: flex;
    font-size: 32px;
    flex-direction: row;
}

.footerIcons{
    flex: 1;
}