/** 
*The text is fluid-responsive controlled by the [vw] and [em] units. 
*
* Element font-sizes adjusts as per font-size [vw] declared on the body. 
*/


body {
    margin: 0;
    padding: 0;
    color:#000;
    background: #ffffff;
    font-family: 'Gilroy Regular', 'Roboto',
    'Helvetica Neue', sans-serif;
    position: relative;
}

body * {
    box-sizing: border-box;
    text-rendering: geometricPrecision !important;
	-moz-text-rendering: geometricPrecision !important;
	-o-text-rendering: geometricPrecision !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-font-smoothing: antialiased !important;
	-o-font-smoothing: antialiased !important;
	-ms-font-smoothing: antialiased !important;
}

/*  D e c l a r e d   F o n t s */
@font-face {
	font-family: 'Gilroy Regular';
	src: url('../font/Gilroy Regular.otf') format('opentype');
}

/* A n c h o r  T a g s  a n d  L i s t  I t e m s  S t y l i n g */
a, li, ul {
    display: inline-block;
    color: inherit;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}

/* H e a d e r  T e x t  S t y l e s */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: #000000;
    font-size: 1.875em;
	padding: 10px 20px 0;
    font-weight: 600;
	text-align: left;
	text-decoration: none;
	text-rendering: geometricPrecision !important;
	-webkit-text-rendering: geometricPrecision !important;
	-moz-text-rendering: geometricPrecision !important;
	-o-text-rendering: geometricPrecision !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-font-smoothing: antialiased !important;
	-o-font-smoothing: antialiased !important;
	-ms-font-smoothing: antialiased !important;
}

p, pre, address {
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.02ex;
    padding: 10px 20px;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    line-height: 2rem;
    font-family: 'Montserrat', sans-serif;
    text-rendering: geometricPrecision !important;
    -webkit-text-rendering: geometricPrecision !important;
    -moz-text-rendering: geometricPrecision !important;
    -o-text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-font-smoothing: antialiased !important;
    -o-font-smoothing: antialiased !important;
    -ms-font-smoothing: antialiased !important;
}

/* B u t t o n s */
button {
    display: block;
    padding: 10px;
    border: none;
    outline: none;
    color: #FFF;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.09ex;
    font-weight: bold;
    font-size: 1.175em;
    font-family: 'Gilroy Regular';
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
}

/* R e c t a n g l e   B u t t o n  */
.rectanglebutton {
    border-radius: none;
    background: #000000;
}

/*  R o u n d   B u t t o n  */
.roundbutton {
    border-radius: 50px;
    background: #000000;
}

/*  S o f t  E d g e  B u t t o n  */
.softbutton {
    border-radius: 4px;
    background: #000000;
}

/* B o r d e r  o n l y  t r a n s p a r e n t  b a c k g r o u n d */
.borderbutton {
    border-radius: 0;
    border: 1px solid #ffffff;
    background: transparent;
}

/* G r a d i e n t  B u t t o n */
.gradientbutton {
    border-radius: 0;
    background: linear-gradient(65deg, red, blue);
}

.transparentbutton {
    color: #000080;
    padding: 20px 20px;
    border-radius: 0;
    background: transparent;
}

/*  H a m b u r g e r  B u t t o n  */
.hamburger {
    display: block;
    min-width: 50px;
    min-height: 40px;
    cursor: pointer;
    outline: none;
    border: none;
    float: right;
    margin: 12px 20px;
    background: transparent;
}

/* H a m b u r g e r   b u t t o n   e l e m e n t s */
.hamburger span {
    width: 25px;
    height: 2px;
    left: 0;
    position: relative;
    display: block;
    background-color: #000000;
    margin: auto;
    padding: auto;
    transition: all 300ms ease-in-out;
}

.hamburger span:after {
    content: '';
    width: 100%;
    height: 2px;
    top: 7px;
    right: 0;
    position: absolute;
    background-color: #000000;
    transition: all 300ms ease-in;
}

.hamburger span:before {
    content: '';
    width: 100%;
    height: 2px;
    top: -7px;
    right: 0;
    position: absolute;
    background-color: #000000;
    transition: all 300ms ease-in;

}

/* H a m b u r g e r  T o g g l e d */
.hamburger.toggle span {
    background-color: transparent;
    width: 25px;
}

.hamburger.toggle span:before {
    top: 0;
    opacity: .9;
    transform: rotate(45deg);
    background: #000000;
    width: 100%;
}

.hamburger.toggle span:after {
    top: 0;
    width: 100%;
    opacity: .9;
    transform: rotate(-45deg);  
    background: #000000;
}

/* C o n t e n t   W r a p p e r s   a n d   C o n t a i n e r s
* 
* F l e x   c o n t a i n e r s 
*/
.container-flex {
    width: 100%;
    height: 100vh;
    margin: 0;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
}

/* 
* G r i d   C o n t a i n e r 
*/
.container-grid {
    width: 100%;
    height: 100vh;
    display: grid;
    -webkit-display: grid;
    -moz-display: grid;
    -ms-display: grid;
    box-sizing: border-box;
}

/* 
* N o r m a l  C o n t a i n e r 
*/
.container {
    width: 100%;
    height: 100vh;
    background: initial;
    box-sizing: border-box;  
}

/* R e s p o n s i v e   I m a g e s */
img {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.img-overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 1;
    background: rgb(0, 0, 0, 0.5);
    top: 0; left: 0; padding: 0; margin: 0;
}



/* T o g g l e   C l a s s e s */


/* A c t i v e   c l a s s e s */
.full-screen-menu.open {
    height: 100vh;
    opacity: 1;
    visibility: visible;
}

.navmenu.active {
    visibility: hidden;
}

.navbar.active {
    background-color: transparent;
}

body.active {
    overflow: hidden;
}

/* H e a d e r   a n d   N a v i g a t i o n   E l e m e n t s */
header {
    width: 100%;
    height: 70px;
    background: rgb(255, 255, 255, 1);
    position: fixed;
    top: 0;
    z-index: 9;
    transition: all 1000ms ease-in;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

header.open {
    background: transparent;
    box-shadow: none;
    transition: all 1000ms ease-in-out;
}

.navmenu ul li a {
    padding: 10px;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.05ex;
    font-family: 'Gilroy Regular';
    transition: all 300ms ease-in-out;
    display: block;
    margin: 0 10px;
    position: relative;
    font-weight: 400;
    font-size: 0.85rem;
}

.navmenu a:hover {
    color: #000080;
}

.navmenu a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #FF4D00;
    bottom: -1px;
    left: 5%;
    visibility: hidden;
    -webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}

.navmenu a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/* B r a n d   L o g o  */
.brand-logo {
    width: 150px;
    height: auto;
    display: block;
    position: relative;
    cursor: pointer;
}

.brand-logo img {
    display: block;
    width: 60%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    margin-top: 15px;
}

/* F u l l   w i d t h   n a v i g a t i o n   m e n u */
.full-screen-menu {
    position: fixed;
    top: 0;
    right: 0;
    margin: 0;
    width: 100%;
    height: 0;
    background-color: #ffffff;
    z-index: 2;
    overflow: hidden;
    visibility: hidden;
    opacity: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "navigation"
    "address";
    transition: all 500ms ease-in;
}

/* M o b i l e   N a v i g a t i o n   m e n u  */
.mobile-navigation {
    grid-area: navigation;
    position: relative;
    height: auto;
}

.mobile-navigation ul {
    margin: 90px 0 10px;
}

.mobile-navigation li a {
    color: #000000;
    font-size: 1.675em;
    padding: 0 30px;
}

.mobile-navigation li {
    display: list-item;
    padding: 5px 0;
    opacity: 0;
    visibility: hidden;
    transition: visibility 300ms opacity 300ms ease-in;
    transition-delay: 500ms;
}

/* M o b i l e   M e n u   A n i m a t i o n s */
.mobile-navigation li.open {
    visibility: visible;
    opacity: 1;
    animation: fadeInDown  1500ms ease forwards;
    animation-delay: 300ms;
}

.mobile-navigation li.open:nth-child(2) {
    animation-delay: 340ms;
}

.mobile-navigation li.open:nth-child(3) {
    animation-delay: 380ms;
}

.mobile-navigation li.open:nth-child(4) {
    animation-delay: 420ms;
}

.mobile-navigation li.open:nth-child(5) {
    animation-delay: 460ms;
}

.mobile-navigation li.open:nth-child(6) {
    animation-delay: 500ms;
}

.mobile-navigation li.open:nth-child(7) {
    animation-delay: 540ms;
}

@keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

/* O v e r l a y   M e n u   C o n t a c t s */
.address div {
    position: relative;
    opacity: 0;
    visibility: 0;
    transition: visibility 300ms opacity 300ms ease-in;
    transition-delay: 800ms;
}

.address div.open {
    visibility: visible;
    opacity: 1;
    animation: fadeInDown  1500ms ease forwards;
    animation-delay: 300ms;
}

.address div.open:nth-child(2) {
    animation-delay: 400ms;
}

.address.open div:nth-child(3) {
    animation-delay: 500ms;
}

.address.open div:nth-child(4) {
    animation-delay: 600ms;
}

@keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

.contacts {
    grid-area: address;
    height: auto;
}

.contacts span {
    padding: 20px 30px;
    font-size: 1.125em;
    font-style: normal;
    font-weight: 300;
    font-family: 'Gilroy Regular', 'Montserrat', 'Roboto', 'Helvetica', sans-serif;
    color: #bebebe; 
    position: relative;
}

.contacts address {
    padding: 0 30px 12px;
    font-size: 1.375em;
    font-style: normal;
    font-weight: 300;
    font-family: 'Gilroy Regular', 'Montserrat', 'Roboto', 'Helvetica', sans-serif;
    color: #000000;
    line-height: 1.5em;
}

.contacts .location a {
    padding: 0;
    color: #000000;
    font-size: inherit;
}

.contacts address ul {
    padding: 0;
    margin: 20px 0;
}

.contacts address li {
    display: inline-block;
    width: 45px;
    height: 45px;
    position: relative;
    margin: 0 2px;
    border: 1px solid #000000;
}

.contacts address li:first-child {
    margin-left: 0; 
}

.contacts address li a {
    color: #000;
    font-size: 20px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    padding: 27% 31%;
}

/*  C u s t o m   C o n t e n t   S l i d e r  */
.swiper-container {
    width: 100%;
    height: 100vh;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.swiper-wrapper {
    margin-right: 0;
}

.swiper-slide {
    transition: all 3000ms ease-in;
    margin-right: 0;
}

.slide {
    display: grid;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    cursor: -webkit-grab;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.slide * {
    color: #ffffff;
    text-align: left;
}

.slide:nth-child(1) {
    background-image: url(../img/slide03.jpg); 
}

.slide:nth-child(2) {
    background-image: url(../img/slide02.jpg); 
}

.slide:nth-child(3) {
    background-image: url(../img/slide01.jpg); 
}

.slide:nth-child(4) {
    background-image: url(../img/slide04.jpg); 
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: rgb(255, 255, 255, .4);
    z-index: 2;
    transition: all 300ms ease-in;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #000080;
}

/* S l i d e   C a p t i o n   T e x t */
.slideText {
    position: relative;
    top: 25%;
    width: 90%;
    height: 60vh;
    z-index: 2;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

.slideText * {
    text-align: center;
}

.slideText h1 {
    padding: 50px 20px 0;
    color: #ffffff;
    font-size: 3.785em;
    font-family:  'Gilroy Regular', 'Roboto', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

.slideText p {
    padding: 5px 0 0;
    letter-spacing: 0.10ex;
}

.slideText button {
    display: block;
    margin: 0 auto;
    font-weight: 300;
    letter-spacing: 0.15ex;
    padding: 10px 20px;
    font-size: 0.975em;
    border-color: #FF4D00;

}

/* S l i d e  C o n t r o l s */
.swiper-button-next,
.swiper-button-prev{
    position:absolute;
    top:50%;
    width:27px;
    height:44px;
    margin-top:-22px;
    z-index:10;
    cursor:pointer;
    background-size:27px 44px;
    background-position:center;
    background-repeat:no-repeat
}



/* C o m p a n y  / A b o u t   S e c t i o n */
.about {
    width: 100%;
    height: auto;
    position: relative;
    background: #ffffff;
    display: grid;
    -ms-display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "leftcolumn";  
    grid-auto-rows: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* A b o u t  &  T e c h n o l o g y  G r i d  A r e a s */
.column:first-child {
    grid-area: leftcolumn;
    //height: auto;
}

.column:last-child {
    grid-area: rightcolumn;
    text-align: left;
    height: auto;
}

.blank {
    display: none;
}

.text-wrapper {
    display: none;
}

.about .content h1 {
    display: none;
}

.about .column {
    width: 94%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

.about .column:first-child {
    margin-top: 10px;
    height: auto;
}

.about .partners {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    height: auto;
    display: grid;
    position: relative;
    top: -20px;
    grid-template-columns: repeat(2, 1fr);
}

.about img {
    width: 60%;
    height: auto;
    display: block;
    margin-left: 20px;
    margin-top: 30px;
}

.about h2 {
    margin: 80px 0 0;
    position: relative;
    text-transform: uppercase;
    padding: 0 20px;
}

.about h6 {
    margin: 10% 0 0;
    color: #4b4b4b;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

.about h6::after {
    content: '';
    width: 5%;
    height: 1px;
    margin: 10px 0;
    background: #cecece;
    position: relative;
    display: block;
}

.about .column p {
    padding: 0 20px;
}

.about .column span {
    color: #a7a7a7;
    margin: 5px 0 10px;
    position: relative;
    display: block;
    padding: 0 20px;
    font-size: 1.125em;
}

.about .column span:after {
    content: '';
    width: 20px;
    height: 1px;
    background: #a7a7a7;
    position: absolute;
    left: -12px;
    top: 8px;
    display: block;
}

/* T e c h n o l o g y   S e c t i o n */
#technology {
    width: 100%;
    height: auto;
    display: grid;
    position: relative;
    background: #ffffff;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "leftcolumn"
    "rightcolumn";
}

#technology .column img {
    width: 90%;
    height: auto;
    display: block;
    position: relative;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
}

#technology .subColumn:last-child {
    width: 100%;
    height: auto;
    left: 0;
    display: block;
    position: relative;
    background: initial;
    margin: 0;
}

#technology h2 {
    font-size: 3.065em;
}

/* E d u c a t i o n   s e c t i o n */
#education {
    width: 100%;
    height: 120vh;
    display: grid;
    background: #ffffff;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "rightcolumn"
    "leftcolumn";
}

#education .column:first-child {
    grid-area: leftcolumn;
    height: auto;
}

#education .column:last-child {
    grid-area: rightcolumn;
    height: auto;    
}

#education .column p {
    margin-bottom: 50px;
    height: auto;
}

#education .column img {
    width: 90%;
    height: auto;
    display: block;
    position: relative;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
}

#education h2 {
    font-size: 3.065em;
}

/* C a l l - t o - A c t i o n */
.call-to-action {
    width: 100%;
    height: 200vh;
    position: relative;
    background-image: url(../img/classroomlime.jpg);
    background-attachment: fixed;
	background-position: top center;
	background-repeat: no-repeat;
    background-size: auto 100%;
}

.img-overlay {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "calltext"
    "requestform";
    height: 200vh;
}

.img-overlay .text-box {
    grid-area: calltext;
}

.call-to-action .img-overlay {
    grid-area: callinfo;
}

/* Request Form */
.request-form {
    grid-area: requestform;
}

.client-details {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}

.product-requested {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}

/* C a l l  t o  a c t i o n  F o r m */
.request-form input[type=text], select, textarea {
    width: 100%; 
    padding: 12px;  
    border: none; 
    box-sizing: border-box; 
    background: rgb(0, 0, 0, 0.4);
    color: #ffffff;
    margin-top: 6px; 
    margin-bottom: 16px; 
    font-family: 'Gilroy Regular', sans-serif;
    resize: vertical;
    outline: none;
}

.request-form input[type=email], select, textarea {
    width: 100%; 
    padding: 12px;  
    border: none; 
    box-sizing: border-box; 
    background: rgb(0, 0, 0, 0.4);
    color: #ffffff;
    margin-top: 6px; 
    margin-bottom: 16px; 
    font-family: 'Gilroy Regular', sans-serif;
    resize: vertical;
    outline: none;
}
/* P l a c e h o l d e r  T e x t */
::placeholder { 
    color: rgb(255, 255, 255, .7);
    opacity: 1;
    letter-spacing: 0.05ex;
}

:-ms-input-placeholder { 
    color: #ffffff;
}

::-ms-input-placeholder { 
    color: #ffffff;
}

/* R e q u e s t  f o r m  i n p u t */
.request-form input[type=submit] {
    background-color: #000080;
    color: #FFFFFF;
    text-transform: uppercase;
    font-family: 'Gilroy Regular', sans-serif;
    letter-spacing: 0.10ex;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    outline: none;
    transition: all 300ms ease-in-out;
}

.request-form input[type=submit]:hover {
    background-color: #0096cc;
}

.request-form label {
    text-transform: uppercase;
    letter-spacing: 0.10ex;
    font-size: 0.7375rem;
    color: #ffffff;
}

/* R e q u e s t  F o r m   C o n t a i n e r */
.request-form .container {
    width: 90%;
    background: transparent;
    padding: 20px 0 0;
    margin-right: auto;
    margin-left: auto;
}

.request-form .container h3 {
    color: #ffffff;
    font-weight: 600;
    padding: 0 0 20px;
    text-transform: uppercase;
    font-size: 1.375rem;
    letter-spacing: 0.10ex;
}

/* Call to Action Text */
.call-to-action h2, 
.call-to-action p {
    color: #FFF;
}

.call-to-action h2 {
    padding: 40% 20px 0;
    font-size: 3.065em;
}

.call-to-action button {
    margin: auto 20px;
}


/* N e w   S e r v i c e s  S e c t i o n */
.business-solutions {
    width: 100%;
    height: auto;
    background: #ffffff;
    position: relative;
}

.business-wrapper {
    width: 92%;
    height: 70%;
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10%;
}

.solutions-box {
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "imagebox"
    "serviceinfo";
    grid-auto-rows: 60% 40%;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    height: 100%
}

.img-layer {
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
    opacity: 0.7;
    position: absolute;
}


.solutions-header {
    width: 94%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.solutions-header span {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.10ex;
    font-size: 0.9785rem;
    margin-top: 12%;
    display: block;
}

.solutions-header h2 {
    font-weight: 400;
    padding: 0;
    text-align: center;
    margin: 0;
    color: #979797;
    font-size: 2.065rem;
}

.solutions-header h2 br {
    display: none;
}

.solutions-header hr {
    width: 30%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 7%;
}

.solutions-img {
    grid-area: imagebox;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

.solutions-overlay {
    background: rgb(0, 0, 0, 1);
    width: auto;
    height: 100%;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
}

.solutions-box img {
    width: 100%;
    height: 100%;
}

.solutions-dtl {
    background: #ffffff;
    grid-area: serviceinfo;
    height: auto;
}

.solutions-dtl h5 {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #252525;
    letter-spacing: 0.10ex;
    padding: 30px 0 0;
}

.solutions-dtl p {
    color: #8d8d8d;
    text-align: center;
    margin-bottom: 20%;
    padding: 0 20px;
}

/* C a l l - t o - A c t i o n - T w o */
.call-to-action-two {
    width: 100%;
    height: 200vh;
    position: relative;
    background-image: url(../img/laptop.jpg);
    background-attachment: fixed;
	background-position: 30%;
	background-repeat: no-repeat;
	background-size: cover;
}

.call-to-action-contact {
    width: 100%;
    height: 200vh;
    position: relative;
    background-image: url(../img/call.jpg);
    background-attachment: fixed;
    background-position: 30%;
    background-repeat: no-repeat;
    background-size: cover;
}

.call-to-action-two h2, 
.call-to-action-two p {
    color: #FFF;
}

.call-to-action-two h2 {
    padding: 40% 20px 0;
    font-size: 3.065em;
}

.call-to-action-two button {
    margin: auto 20px;
}

/* C l i e n t s  T e s t i m o n i a l s */
.testimonials {
    width: 100%;
    height: 80vh;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: #e7e7e7;
}

.client {
    width: 100%;
    height: 80vh;
    margin-right: auto;
    margin-left: auto;
    display: none;
}

.clientContent {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "quotted";
    height: 80vh;
}

/* T e s t i m o n i a l s  G r i d  A r e a s */
.firmName {
    grid-area: firm;
    border-right: 1px solid #dddddd;
    display: none;
}

.clientQuote {
    grid-area: quotted;
    border-right: 1px solid #dddddd;
}

.client .clientBlank {
    grid-area: blank;
    display: none;
}

.bubbles-container {
    grid-area: bubbles;
    border-right: 1px solid #dddddd;
}

.quote-text-area {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.client blockquote {
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 3% 97%;
    font-family: 'Playfair Display', serif;
}

.slideNumber {
    font-family: 'Playfair Display', serif;
    font-size: 1.125rem;
    color: #000080;
    text-align: center;
    padding: 30% 0 0;
}

.clientQuote i {
    color: #000080;
    font-size: 18px;
    padding: 20px 0 0; 
    margin: 0;
}

.clientQuote blockquote p {
    font-size: 1.125rem;
    line-height: 1.5em;
    margin: 0;
    padding: 30px 5px 0;
    text-align: center;
    font-family: 'Playfair Display', serif;
}

.client cite {
    font-style: normal;
    text-align: center;
    display: block;
    margin: 20px auto 0;
    font-size: 0.875rem;
    font-family: 'Playfair Display', serif;
}

.client cite span:first-child {
    color: #000080;
    padding: 8px;
}

.client cite span:last-child {
    color: #808080;
}

.firmName p {
    font-family: 'Playfair Display', serif;
    text-align: right;
    padding: 20% 5% 0;
}

.firmName h2 {
    padding: 12% 5% 0;
    text-align: right;
    color: #979797;
    font-weight: 400;
    font-family: 'Playfair Display', serif;
}

/* T e s t i m o n i a l s  S e l e c t o r */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 12%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: #afafaf;
    font-weight: bold;
    font-size: 12px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    transition: all 300ms ease-in-out;
}
  
.prev {
    position: absolute;
    right: 25%;
    border-radius: 3px 0 0 3px;
}

.next {
    position: absolute;
    right: 8%;
    border-radius: 3px 0 0 3px;
}
  
.prev:hover, .next:hover {
    color: #000080;
}

.selector span {
    padding: 0 10px;
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'Playfair Display', serif;
}

/* F o o t e r   S e c t i o n */
footer {
    width: 100%;
    height: auto;
    background: #000000;
}

.footer-container {
    display: grid;
    grid-template-areas:
    "company"
    "solutions"
    "products"
    "information";
}

footer * {
    text-align: left;
}

footer a {
    font-size: 1.325em;
    color: #4b4b4b;
    letter-spacing: 0.10ex;
    transition: all 300ms ease-in-out;
}

footer a:hover {
    color: #ffffff;
}

footer .fa {
    font-size: 20px;
    padding: 0 14px;
    transition: all 300ms ease-in-out;
}

footer .fa:hover {
    transform: scale(1.1);
}

footer .fa:first-child {
    padding-left: 0;
}

footer span {
    margin: 30px 30px;
    font-size: 1.175em;
    color: #ffffff;
    font-weight: 600;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.30ex;
}

.company li,
.products li,
.solutions li {
    display: list-item;
}

.company a,
.products a,
.solutions a {
    padding: 12px 30px;
}

.footer-nav {
    margin: 80px 0 0;
}

.footer-nav ul li a {
    font-size: 1.375em;
    color: #ffffff;
    font-weight: 600;
}

/* F o o t e r   G r i d   A r e a s */
.company {
    grid-area: company;
    height: auto;
}

.products {
    grid-area: products;
    height: auto;
}

.products-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: auto;
}

.solutions {
    grid-area: solutions;
    height: auto;
}

.contact-details {
    grid-area: information;
    height: auto;
}

.contact-details address {
    padding: 0 30px 10px;
    font-size: 1.125em;
    font-style: normal;
    font-weight: 300;
    color: #4b4b4b;
    line-height: 2.0em;
    letter-spacing: 0.09ex;
}

.contacts-details address li a {
    padding: 0 20px;
    display: block;
}

.contacts-details address li:first-child {
    margin-left: 0; 
}

/* C o p y r i g h t  [ © ]  S e c t i o n */
.copyright {
    border-top: 1px solid #4b4b4b;
    width: 85%;
    margin-right: auto;
    margin-left: auto;
}

.copyright span {
    padding: 20px 0 10px;
    font-size: 1.175em;
    font-style: normal;
    font-weight: 300;
    color: #FF4D00;
    letter-spacing: 0;
    text-transform: none;
    margin: 0px 0 0;
}

.copyright span:first-child {
    text-transform: uppercase;
    letter-spacing: 0.40ex;
    font-weight: 600;
    padding: 0;
    margin: 15px 0;
    color: #ffffff;
    font-size: 1.065em;
}

.copyright span:nth-child(2) {
    padding: 0 0 10px;
}

.copyright span:last-child {
    margin: 0 0 20px;
    padding: 0;
}

.copyright a {
    font-size: 1.065em;
    color: #ffffff;
}

/*** E n d  o f  H o m e p a g e ***/

/*  S o l u  t i o n s  a n d  s e r v i c e s  P a g e 
*   
*   This part of the page contains services 
*    offered by Direct eLearning.
*    
*/

/* S o l u t i o n s  H e a d e r  a n d  H e r o */
.hero {
    width: 100%;
    height: 100vh;
    position: relative;
    display: grid;
    -webkit-display: grid;
    -ms-display: grid;
    -moz-display: grid;
    grid-template-columns: 1fr;
    background-image: url(../img/studenthd.png);
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}


.hero_blog {
    width: 100%;
    height: 100vh;
    position: relative;
    display: grid;
    -webkit-display: grid;
    -ms-display: grid;
    -moz-display: grid;
    grid-template-columns: 1fr;
    background-image: url(../img/blog.png);
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero_sent {
    width: 100%;
    height: 100vh;
    position: relative;
    display: grid;
    -webkit-display: grid;
    -ms-display: grid;
    -moz-display: grid;
    grid-template-columns: 1fr;
    background-image: url(../img/sent.png);
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-content {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    z-index: 1;
    position: relative;
    top: 30%;
}

.hero-content * {
    text-align: center;
    color: #ffffff;
    letter-spacing: 0.10ex;
}

.hero-content h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 3.065em;
}

.hero button {
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    color: #ffffff;
    z-index: 1;
    margin-right: auto;
    margin-left: auto;
    display: block;
    padding: 20px;
}

/* Solutions and  Services  Section */
#solutions {
    width: 100%;
    min-height: 100vh;
    background: initial;
    position: relative;
}

/* Solutions Row Wrapper */
.solutions-row {
    width: 90%;
    height: auto;
    background: inherit;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    display: grid;
    -webkit-display: grid;
    -ms-display: grid;
    -moz-display: grid;
    grid-template-columns: 1fr;
    box-sizing: border-box;
}

/* Solutions Column */
.solutions-column {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    position: relative;
    box-sizing: border-box;
    top: 15%;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
}

/* Solution Column Bottom Margin */
.solutions-title,
.solutions-content {
    margin-bottom: 15%;
}

/* Solutions Column Image Left Positioned */
.column-img-lt {
    grid-template-areas:
    "solutionimage"
    "solutionscontent";
}

/* Solutions Column Image Right Positioned */
.column-img-rt {
    grid-template-areas: 
    "solutionimage"
    "solutionscontent";
}

/* Solutions Column Grid Areas */
.solution-title {
    grid-area: solutionimage;
}

.solutions-content {
    grid-area: solutionscontent;
}

/* Solutions Image */
.solutions-identity {
    width: 100%;
    height: 60%;
    display: block;
    background: rgb(0, 150, 204, 0.2);
    margin-top: 20%;
    position: relative;
}

/* S o l u t i o n s  E m b e d d e d  I m a g e */
.solutions-column img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    top: 0;
}

/* S o l u t i o n s  C o l u m n  I m a g e  L e f t */
.column-img-lt img {
    left: 0;
    margin-left: 0;
}

.column-img-lt .solutions-identity {
    left: -40px;
}

/* S o l u t i o n s  C o l u m n  I m a g e  R i g h t */
.column-img-rt .solutions-identity {
    right: -40px;
}

.column-img-rt img {
    right: 0;
}

/*  S o l u t i o n s  C o d e   */
.solution-code {
    position: absolute;
    color: rgb(0, 150, 204, 0.2);
    font-size: 20rem;
    font-family: 'Montserrat', sans-serif;

    font-weight: 700;
    z-index: -1;
    display: block;
    top: 0;
    margin: 0;
    padding: 0;
    transition: all 1000ms ease-in;
}

/* So l u t i o n s  C o d e  R i g h t */
.column-img-rt .solution-code {
    left: 20px;
}

/* S o l u t i o n s  C o d e  R i g h t */
.column-img-lt .solution-code {
    right: 20px;
}

/* S o l u t i o n s  C a p t i o n */
.solutions-caption {
    width: 100%;
    height: auto;
    margin-right: 0;
    margin-left: auto;
    transition: all 300ms ease-in;
}

.column-img-rt .solutions-caption {
    margin-right: auto;
    margin-left: 0;
}

.solutions-content {
    height: 100%;
}

.solutions-content h2 {
    font-weight: 600;
    font-size: 2.375em;
    color: #111111;
    padding: 30% 0;
}

.solutions-content p {
    color:#333333;
    font-size: 0.9375em;
    padding: 0;
    margin: 0;
}

#solutions button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000080;
    float: right;
    transition: all 300ms ease-in;
    padding: 0;
    margin: 0;
}

@keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -20%, 0);
      transform: translate3d(0, -20%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

/* Partnerships and Sponsorships */
.partnerships {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: #000000;
    position: relative;
    box-sizing: border-box;
}

.partnerships img {
    width: 60%;
    height: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding: 2.575em 0;
}

.partner-logo {
    border-right: 1px solid #0e0e0e;
    border-bottom: 1px solid #0e0e0e;
}

.partner-logo:nth-child(2),
.partner-logo:nth-child(4) {
    border-right: none;
}

.partner-logo:nth-child(5) {
    border-bottom: none;
}

/* Solutions Call to Action */
.get-services {
    width: 100%;
    height: 100vh;
    background-image: url(../img/studenthd.png);
    background-attachment: fixed;
    background-position: 40% center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.get-services * {
    color: #ffffff;
}

.get-services-ad {
    margin: 50% 0;
}

.dark-layer {
    width: 100%;
    height: 100vh;
    background: rgb(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.get-services h2 {
    font-size: 3.065em;
    color: #ffffff;
    letter-spacing: 0.04em;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    width: 60%;
    left: 20px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.get-services button {
    font-weight: 300;
    font-size: 0.9065em;
    letter-spacing: 0.05em;
    transition: all 300ms ease-in;
}

.get-services button:hover {
    background: #000080;
    border: 1px solid #000080;
}

/* 
*
*   Products Page Starts Here 
*
*/

/* Hero Section */
.products-home {
    width: 100%;
    height: 70vh;
    position: relative;
    background-image: url(../img/bg/classroomlime.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.products-home .dark-layer {
    height: 70vh;
    display: none;
}

.products-quick-navigation {
    position: sticky;
    top: 30vh;
    width: 22%;
    height: 70vh;
    background: rgba(46, 49, 145, 0.5);
    left: 0;
    z-index: 1;
    display: grid;
    -ms-display: grid;
    grid-template-rows: 12vh 88vh;
    display: none;
}

.products-quick-navigation * {
    display: list-item;
    color: #f0f0f0;
}

.products-quick-navigation ul li a {
    padding: 12px 0 12px 60px;
    font-size: 0.9375rem;
    transition: all 300ms ease-in;
}

.products-quick-navigation ul li a:hover {
    color: #001922;
}

.products-quick-navigation ul {
    margin: 30px 0;
}

.products-quick-navigation-header {
    background: #001922;
}

.products-quick-navigation-header h4 {
    padding: 10% 60px;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

/* Products Grid */
.products-grid {
    width: 100%;
    height: auto;
    background: #f5f5f5;
    position: relative;
    box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #e4e4e4;    
}

/* Products Grid Header */
.products-grid-header {
    padding: 10% 0 5%;
    width: 80%;
    margin: auto;
}

#tablets .products-grid-header {
    padding: 10% 0 15%;
}

.products-grid-header * {
    padding: 0;
    text-align: right;
    font-size: 1.5rem;
    color: #000080;
    font-weight: 600;
}

/* Products Grid Row */
.products-grid-row {
    width: 94%;
    height: auto;
    background: initial;
    position: relative;
    display: grid;
    -ms-display: grid;
    grid-template-columns: 1fr;
    grid-gap: 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10%;
}

/* Product Column */
.products-grid-column {
    width: 100%;
    height: auto;
    position: relative;
    background: #ffffff;
    display: grid;
    -ms-display: grid;
    grid-template-columns: 1fr;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Product Content */
.product-content {
    width: 100%;
    height: auto;
    display: grid;
    -ms-display: grid;
    grid-auto-rows: 1fr 5fr 2fr 1fr;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* Product Name Container */
.product-name {
    border-top: 1px solid #f1f1f1;
    width: 90%;
    height: auto;
    margin: auto;
}

.product-name * {
    text-align: center;
    color: #727272;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0;
    padding: 1em 1.5em 0;
}

.product-name p {
    font-size: 0.7375rem;
}

.product-name h2 {
    font-weight: 600;
    color: #000000;
}

/* Product Tag & Code */
.product-code span {
    width: 30%;
    height: 100%;
    background: #000080;
    display: block;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    color: #f0f0f0;
    font-weight: 500;
    padding: 0.5625em;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
} 

/* Product Code Icon */
.product-code i {
    padding: 0 0.5625em;
}
   
/* Product Image Container */
.product-img {
    width: 90%;
    margin: auto;
    margin: 10px auto;
}

/* Product Image */
.product-img img {
    width: 100%;
    margin: 10% auto;
    display: block;
    position: relative;
}

/* Product Information Container */
.product-info {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* Product Specifications */
.product-specs {
    width: 90%;
    height: 70%;
    position: relative;
    top: 30%;
    margin: 0 auto;
    display: grid;
    -ms-display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: initial;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;    
}

.product-specs * {
    color: #d1d1d1;
    text-align: center;
}

.product-specs div {
    height: inherit;
    border-top: 1px solid #f1f1f1;
}

.product-specs div:last-child * {
    float: right;
}

/* Product Information Button */
.product-info button {
    background: transparent;
    color: #000080;
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03ex;
    font-family: 'Montserrat', sans-serif;
}

.product-section span {
    font-size: 0.785em;
    font-family: 'Montserrat', sans-serif;
}

.product-section i {
    color: #ffffff;
    font-size: 14px;
}

/* Product Modal / Pop-up */
.product-modal {
    width: 100%;
    height: 100vh;
    position: fixed;
    display: none;
    z-index: 1;
    left: 0;
    top: 0;
    overflow: hidden;
    background: rgb(0, 0, 0);
    background: rgb(0, 0, 0, 0.4);
}

/* Product Modal Content */
.product-modal-content {
    width: 70%;
    height: 40vh;
    margin: 20% auto;
    display: grid;
    -ms-display: grid;
    grid-template-rows: 1fr 2fr;
    background: #ffffff;
    position: relative;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.product-modal-content-header {
    border-bottom: 1px solid #eeeeee;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

/* The Close Button */
.close {
    display: block;
    position: relative;
    text-align: right;
    margin-right: 20px;
    color: #aaa;
    font-size: 40px;
    font-weight: 100;
    transition: all 300ms ease-in;
}

.close:hover,
.close:focus {
    color: #000080;
    text-decoration: none;
    cursor: pointer;
}

.contact-text h2{
    color: #ffffff;
}

.contact-text p{
    color: #ffffff;
}

/*
-----------------------------------------------------------
-----------------------------------------------------------
*
* C o d e d   b y  A m e i z  T  a n d  A l p h a m
*
* S e l t a  D i g i t a l  S t u d i o  //  a l p ha m
*
* D e v e l o p e d  i n  2 0 1 8
*
-----------------------------------------------------------
-----------------------------------------------------------
*/