/*CSS STYLESHEET MAIN*/

body{
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    word-break: break-word;
}


.font-type-2{
    font-family: 'Oswald', sans-serif;
    
}
/*creates container padding for elements*/
.container{
    padding: 30px 40px 30px 40px;
    margin: 0;
    text-align: left;
}

.container-footer{
    padding: 0 20px 0 20px;
    margin: 0;
    text-align: left;
}

.container-sdm{
    position:absolute;
    right:20px;
}

.flag-spacing{
    padding-left: 50px;
}

/*list padding courses*/

ul.padding-list-none, li.padding-list-none { 
    list-style-type: none;
    list-style-position:inside;
    margin:0;
    padding:0; 
}

/*mobile hide*/

/*mobile*/

@media (max-width: 767px) {

  .visible-mobile {display: inline !important;}

  .hidden-mobile {display: none !important;}
}

@media (max-width: 1180px) {

  .visible-mobile2 {display: inline !important;}

  .hidden-mobile2 {display: none !important;}
}

@media (max-width: 1023px) {

  .visible-mobile3 {display: inline !important;}

  .hidden-mobile3 {display: none !important;}
}

@media (max-width: 400px) {

  .visible-mobile4 {display: inline !important;}

  .hidden-mobile4 {display: none !important;}
}



/*text formatting*/

.jumbotron-text {
    color: #fff;
    text-align: center;
}

/*list formating*/

li {
    list-style: none;
    list-style-position: inherit;
    
}

li a {
    color: #0097A7;
}

 h2, h3 {
    font-weight: 100;
}

h1, h4, h5, h6 {
    font-weight: 300;
    /* word-break: break-all; */
}



/*links*/

/* unvisited link */
a:link {
    text-decoration: none;
    color: #0097A7;
}

/* visited link */
a:visited {
    color: #0097A7;
}

/* mouse over link */
a:hover {
    font-weight: 700;
    color: #006064;
}

/* selected link */
a:active {
    color: inherit;
}

/*footer links*/
footer a:link {
    color: rgb(158, 158, 158);
}


/*link on blue background*/

.link-white a{
    color: #fff;
}

.link-white a:hover{
    color: #333;
}


/*buttons*/
.mdl-button--accent-cta {
    border-radius: 0 !important;
}

.mdl-button--accent-cta2 {
    border-radius: 0 !important;
}

.mdl-button--accent-cta3 {
    /* border-radius: 0 !important; */
}

.mdl-button--accent-cta4 {
    border-radius: 0 !important;
}

.mdl-button-pos-fixed-middle {
    position: fixed;
    top: 50%;
    right: 32;
    z-index: 100;
}



/* hr color*/

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ff6a32;
    margin: 1em 0;
    padding: 0; 
}


/*table header th*/

.mdl-data-table th {
    font-size: 14px;
}

/*aligns text to the center*/
.text-center {
    text-align: center;
}

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

.text-left-nav {
    text-align: left;
    padding-left: 20px;
}


.text-center-cards {
    text-align: center;
    padding: 105px 0 105px 0;
    color: #fff
}

.header-center-cards {
    text-align: center;
    padding: 80px 0 80px 0;
    height: 350px;
}



.bottom-center-cards {
    text-align: center;
    padding: 180px 0 20px 0;
}

.text-white {
    color: #fff;
}



.text-grey {
    color: #333;
    font-weight: normal;
}


.mdl-mega-footer__link-list{
    color: #fff;
}

.mdl-mega-footer__link-list a{
    color: #aaa;
}

/*spacing of cells*/
.spacing-no-grid-spacing {
    padding: 0;
}

/*aligns the widgets on the index page*/
.widget-align {
    float: left;
    padding: 20px 40px 20px 40px;
    
    font-weight: 700;
}

/*bottom background image*/

.background-image-bottom-1 {
    background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("../img/background-bottom.jpg") center / cover;
}

/*background color*/
.background-alt-1{
    background-color: #fff ;
    color: #444;
}

.background-alt-2{
    background-color: #00ACC1;
    color: #fff;
    
}

.background-alt-3{
    background-color: #313131;
}

.background-alt-4{
    background-color: #0097A7;
    color: #fff;
}


/*FA facebook*/

.fa-facebook {
    font-size: 26px;
    color: #07f;
}

/*mdl icon map*/

.icon-map{
    color: #f00;
}

/*cta button color*/


.mdl-button--accent-cta {
    background-color: #FF4500;
    color: #fff;
    font-weight: 500;
    
    -webkit-animation:animatezoomcta 2s;animation:animatezoomcta 2s
    -webkit-animation-iteration-count: 25; /* Safari 4.0 - 8.0 */
    animation-iteration-count: 20;
}

.mdl-button--accent-cta2 {
    background-color: #FF4500;
    color: #fff;
    font-weight: 500;   
    
}

.mdl-button--accent-cta3 {
    background-color: #FF4500;
    color: #fff;
    font-weight: 500;
    -webkit-animation:animatezoomcta 2s;
    animation:animatezoomcta 2s
    -webkit-animation-iteration-count: 25; /* Safari 4.0 - 8.0 */
    animation-iteration-count: 20;
    -webkit-animation-delay: 25s; /* Safari 4.0 - 8.0 */
    animation-delay: 5s;
}



.mdl-button--accent-cta:hover {
    background-color: #ff6a32;
    color: #000;
     
}

.mdl-button--accent-cta2:hover {
    background-color: #ff6a32;
    color: #000;
     
}

.mdl-button--accent-cta3:hover {
    background-color: #ff6a32;
    color: #000;
     
}



/*arrow-down MDL Icons*/

.arrow-down{
    position: absolute;
    left: 47.25vw;
    top: 480px;
    z-index: 300;
    
}

.arrow-down2{
    position: absolute;
    left: 47.25vw;
    top: 300px;
    z-index: 290;
    
}

.arrow-down-tablet{
    position: absolute;
    left: 45.5vw;
    top: 480px;
    z-index: 300;
    
}

.arrow-down-tablet2{
    position: absolute;
    left: 45.5vw;
    top: 300px;
    z-index: 300;
    
}

.arrow-down-phone{
    position: absolute;
    left: 42vw;
    top: 480px;
    z-index: 300;
    
}

.arrow-down-phone2{
    position: absolute;
    left: 42vw;
    top: 320px;
    z-index: 300;
    
}

.arrow-down i{
    font-weight: 500;
    color: #00ACC1;
}

.arrow-down-tablet i{
    font-weight: 500;
    color: #00ACC1;
}

.arrow-down-phone i{
    font-weight: 500;
    color: #00ACC1;
}

.mdl-button--colored {
    background-color: #fff !important;
    border-width: 1px;
    border-color: #00ACC1;
    border-style: solid;
}

.mdl-button--colored:hover {
    background-color: #bbb !important;
}

button.mdl-button--colored {
    /* color: #00ACC1 !important; */
}

button.mdl-button--colored:hover {
    color: #000 !important;
    font-weight: 500;
    
}





/*jumbotron animate opacity fade*/


@-webkit-keyframes opac{
    0%{opacity:0.005}
    10%{opacity:1}
    90%{opacity:1}
    100%{opacity:0.005}
}
@keyframes opac{
    0%{opacity:0.005}
    10%{opacity:1}
    90%{opacity:1}
    100%{opacity:0.005}
}


/*nav link*/

.mdl-navigation__link {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.navbar-text {
    color: #fff !important;
}

.navbar-text:hover {
    background-color: #00a2b2;
    font-weight: 400;
}

.navbar-active {
    background-color: #00a2b2;
    font-weight: 400;
}

.navbar-icon-btn{
    padding-left:16px!important;
    padding-right:0px !important;
}


/*nav*/

.index-layout-transparent .mdl-layout__header,
.index-layout-transparent .mdl-layout__drawer-button {
  /* This background is dark, so we set text to white. Use 87% black instead if
     your background is light. */
  color: white;
}

/*drawer*/
.mdl-layout__drawer {
    z-index: 600;
}


/*drawer button*/

.mdl-layout__drawer-button i {
    font-size: 42px;
    position: relative;
    top:7px;    
    color: #0097A7;
}

.mdl-layout__drawer-button {
    background: #fff;
    border-radius: 50%;
    border-width: 1px;
    border-color: #00ACC1;
    border-style: solid;
    height: 56px;
    width: 56px;
    margin-top: 3px;
    margin-left: 6px;
    
    
   -webkit-box-shadow: 1px 1px 1px 1px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0px 1px 1px 1px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow: 1px 1px 2px #000;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

}


/*zoom img animation*/

.background-image-index-zoom:hover {
     
    -webkit-animation:animatezoom 1s;animation:animatezoom 1s
        
       
}

@-webkit-keyframes animatezoom{
     0%{transform:scale(1); opacity: 1;} 
    50%{transform:scale(1.05); opacity: 0.5;}
    100%{transform:scale(1); opacity: 1;}
}

@keyframes animatezoom{
    0%{transform:scale(1);} 
    50%{transform:scale(1.05);}
    100%{transform:scale(1);}
}

/*zoom cta animation*/

@-webkit-keyframes animatezoomcta{
     0%{transform:scale(1)} 
    50%{transform:scale(1.1)}
    100%{transform:scale(1)}
}

@keyframes animatezoomcta{
    0%{transform:scale(1)} 
    50%{transform:scale(1.1)}
    100%{transform:scale(1)}
}

/*loader*/

.overlay {
  background: rgba(0, 0, 0, 0.1);
  height: 100vh;
}

.spinner {
  font-size: 48px;
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}
.spinner.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.spinner .spinner-blade {
  position: absolute;
  left: 0.4629em;
  bottom: 0;
  width: 0.074em;
  height: 0.2777em;
  border-radius: 0.0555em;
  background-color: transparent;
  -webkit-transform-origin: center -0.2222em;
      -ms-transform-origin: center -0.2222em;
          transform-origin: center -0.2222em;
  -webkit-animation: spinner-fade 1s infinite linear;
          animation: spinner-fade 1s infinite linear;
}
.spinner .spinner-blade:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}
.spinner .spinner-blade:nth-child(2) {
  -webkit-animation-delay: 0.083s;
          animation-delay: 0.083s;
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.spinner .spinner-blade:nth-child(3) {
  -webkit-animation-delay: 0.166s;
          animation-delay: 0.166s;
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.spinner .spinner-blade:nth-child(4) {
  -webkit-animation-delay: 0.249s;
          animation-delay: 0.249s;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.spinner .spinner-blade:nth-child(5) {
  -webkit-animation-delay: 0.332s;
          animation-delay: 0.332s;
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.spinner .spinner-blade:nth-child(6) {
  -webkit-animation-delay: 0.415s;
          animation-delay: 0.415s;
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.spinner .spinner-blade:nth-child(7) {
  -webkit-animation-delay: 0.498s;
          animation-delay: 0.498s;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.spinner .spinner-blade:nth-child(8) {
  -webkit-animation-delay: 0.581s;
          animation-delay: 0.581s;
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.spinner .spinner-blade:nth-child(9) {
  -webkit-animation-delay: 0.664s;
          animation-delay: 0.664s;
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.spinner .spinner-blade:nth-child(10) {
  -webkit-animation-delay: 0.747s;
          animation-delay: 0.747s;
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.spinner .spinner-blade:nth-child(11) {
  -webkit-animation-delay: 0.83s;
          animation-delay: 0.83s;
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg);
}
.spinner .spinner-blade:nth-child(12) {
  -webkit-animation-delay: 0.913s;
          animation-delay: 0.913s;
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg);
}

@-webkit-keyframes spinner-fade {
  0% {
    background-color: #69717d;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes spinner-fade {
  0% {
    background-color: #69717d;
  }
  100% {
    background-color: transparent;
  }
}


/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 2s;
  animation-name: animatebottom;
  animation-duration: 2s
}

@-webkit-keyframes animatebottom {
  from { opacity:0 } 
  to { opacity:1 }
}

@keyframes animatebottom { 
  from{ opacity:0 } 
  to{ opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}

/* Map Overlay*/

.map-overlay {
   background:transparent; 
   position:relative; 
   width:100%;
   height:340px; /* your iframe height */
   top:340px;  /* your iframe height */
   margin-top:-340px;  /* your iframe height */
}


/*faq icon*/

.faq-icon {
    color: #fff;
}



/* modal overlay*/
.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 8000;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 1s;
}

.modal {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 9000;
    width: 100%;
    opacity: 0;
    transition: all 1s;
    text-align: center;
}

.modal.in, .modal-overlay.in {
    opacity: 1;
}

.modal .centered {
    width: 500px;
    display: inline-block;
    background-color: #000000;
    position: relative;
    margin: auto;
}

.modal img {
    max-height: 80%;
    max-width: 80%;
}

.modal-close {
    position: absolute;
    right: 16px;
    color: white;
    top: 16px;
    cursor: pointer;
    z-index: 9950;
}

.modal-text {
    padding: 16px;
    z-index: 9950;
    color: white;
    font-size: 24px;
    font-family: cursive;
    line-height: 1.2;
}

.modal-button {
    margin: 16px;
    padding: 16px;
    z-index: 9950;
    color: white;
    font-size: 16px;
    display: inline-block;
    border: 1px solid white;
    border-radius: 4px;
}

@media (max-width: 500px) {
    .modal .centered {
        width: 90%;
    }
    .modal-overlay {
        background-color: #000000;   
    }
}