/*
Theme Name: webdesign
*/

@import url(font-awesome.min.css);
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap");


/* Basic */
@-ms-viewport {
  width: device-width; }
body {
  -ms-overflow-style: scrollbar; }

@media screen and (max-width: 480px) {
  html, body {
    min-width: 320px; } }
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

body {
  background: #ffffff; }
  body.is-preload *, body.is-preload *:before, body.is-preload *:after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important; }

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }


/* Typography */
 html {
  font-size: 15pt; }
  @media screen and (max-width: 1680px) {
    html {
      font-size: 14pt; } }
  @media screen and (max-width: 1280px) {
    html {
      font-size: 13pt; } }
  @media screen and (max-width: 980px) {
    html {
      font-size: 13pt; } }
  @media screen and (max-width: 480px) {
    html {
      font-size: 13pt; } }


body {
  background-color: #ffffff;
  color: #2c395f; }

body, input, select, textarea {

font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.65; }

a {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: underline; }
  a:hover {
    text-decoration: none; }

strong, b {
  font-weight: 500; }

em, i {
  font-style: italic; }

p {
  margin: 0 0 2rem 0;
}

header.special {
  text-align: center;
  margin-bottom: 0px; }
  header.special p {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto; }


   h3 {
    font-size: 1.45rem; 
color: #2c395f;
} 
 h4 {
    font-size: 1.15rem; 
color: #2c395f;
} 
 h7 {
    font-size: 17px; 
color: #ffffff;
}
 h8 {
     font-size: 0.95rem;  
color: #ffffff;
   } 
 h9 {
    font-size: 1.05rem; 
color: #cccccc;
   } 
      h10 {
    font-size: 1.45rem; 
color: #2c395f;

      }
h13 {
     font-size: 18px;
color: #cccccc
	}
h16 {
     font-size: 18px;
color: #ffffff;
}
  h17 {
    font-size: 1.05rem; 
color: #2c395f;
} 
sub {
  font-size: 0.8rem;
  position: relative;
  top: 0.5rem; }

sup {
  font-size: 0.8rem;
  position: relative;
  top: -0.5rem; }

blockquote {
  border-left: solid 0.5rem;
  font-style: italic;
  margin: 0 0 2rem 0;
  padding: 1rem 0 1rem 2rem; }

code {
  border-radius: 4px;
  border: solid 1px;
 

font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  margin: 0 0.25rem;
  padding: 0.25rem 0.65rem; }

pre {
  -webkit-overflow-scrolling: touch;
 
font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  margin: 0 0 2rem 0; }
  pre code {
    display: block;
    line-height: 1.75;
    padding: 1rem 1.5rem;
    overflow-x: auto; }
hr {
  border: 0;
  border-bottom: solid 1px;
  margin: 2rem 0; }
  hr.major {
    margin: 4rem 0; }

input, select, textarea {
  color: #2c395f; }

a {
  color: #2c395f; }

strong, b {
  color: #2c395f; }

h1 {
  color: #ffffff;
	font-size: 2.10em;                                                                                                                                                                                                                                                                                                                                             
         line-height: 1.3;
	}

h2 {
  color: #ffffff;
	font-size: 2.05em;
         line-height: 1.3;
	}

 h4, h5, h6  {
  color: #2c395f; }

 h3 { 
color: #2c395f;
}  
h7 {
     font-size: 1.05rem; 
color: #ffffff;
      }
h8 {
     font-size: 0.95rem;  
color: #ffffff;
} 
 h9 {
    font-size: 1.05rem; 
color: #cccccc;
   } 
 h11 {
     font-size: 18px;
color: #ffffff;
}
h13 {
     font-size: 18px;
color: #cccccc;
}
h16 {
     font-size: 18px;
color: #ffffff;
}
 h17 { 
color: #2c395f;
}  
blockquote {
  border-left-color: rgba(0, 0, 0, 0.25); }


code {
  border-radius: 4px;
  border: solid 1px;

font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  margin: 0 0.25rem;
  padding: 0.25rem 0.65rem; }

pre {
  -webkit-overflow-scrolling: touch;


font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  margin: 0 0 2rem 0; }
  pre code {
    display: block;
    line-height: 1.75;
    padding: 1rem 1.5rem;
    overflow-x: auto; }

hr {
  border: 0;
  border-bottom: solid 1px;
  margin: 2rem 0; }
  hr.major {
    margin: 4rem 0; }

input, select, textarea {
  color: #2c395f; }

a {
  color: #2c395f; }

strong, b {
  color: #2c395f; }

h1 {
  color: #ffffff;
	font-size: 2.10em;                                                                                                                                                                                                                                                                                                                                             
         line-height: 1.3;
	}

h2 {
  color: #ffffff;
	font-size: 2.05em;
         line-height: 1.3;
	}
 h4 {
    font-size: 1.15rem; 
color: #2c395f;
} 

h4, h5, h6 {
  color: #2c395f; }

  h8 {
    font-size: 0.95rem; 
color: #ffffff;
} 
h7 {
    font-size: 1.05rem; 
  color: #ffffff; }
h9 {
    font-size: 14px; 
color: #cccccc;
      }

blockquote {
  border-left-color: rgba(0, 0, 0, 0.25); }

code {
  background: rgba(0, 0, 0, 0.075);
  border-color: rgba(0, 0, 0, 0.25); }

hr {
  border-bottom-color: rgba(0, 0, 0, 0.25); }

 .loading-gif {
            max-width: 500px;
        }

        .pre-loader {
            position: fixed;
            z-index: 100; /** make sure this is the highest value compared to all other divs **/
            top: 0;
            left: 0;
            background: #2c395f;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
        }

        .pre-loader.hidden {
            animation: fadeOut 2s; /** change to 1s */
            animation-fill-mode: forwards;
        }

        @keyframes fadeOut {
            100% {
                opacity: 0;
                visibility: hidden;
            }
        }

/* Inner */
.inner {
  margin: 0 auto;
  width: 75rem;
  max-width: calc(100% - 6rem); }
  @media screen and (max-width: 480px) {
    .inner {
      max-width: calc(100% - 3rem); } }




/* foto */

	.foto {
       border: 0;
		display: inline-block;
		position: relative;
        box-shadow: 0px 0px 0px 12px #ffffff, 10px 10px 10px 10px rgba(36, 41, 67, 0.15);
	}


		.foto.left, .image.right {
			max-width: 35%;
		}

			.foto.left img, .image.right img {
				width: 80%;
			}

		.foto.left {
			float: left;
			margin: 0 0 0 0;
			top: 0;
		}

		.foto.right {
			float: right;
			margin: 0 0 0 0;
			top: 0;
		}

		.foto.fit {
			display: block;
			margin: 0 0 0 0;
			width: 80%;
		}

			.foto.fit img {
				width: 80%;
			}

		.foto.round {
			border-radius: 80%;
		}

			.foto.round img {
				border-radius: 80%;
			}

		.foto.main {
			display: block;
			margin: 0 0 0 0;
			width: 80%;
		}

			.foto.main img {
				width: 80%;
			}



.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

/* Inner */
.inner {
  margin: 0 auto;
  width: 72rem;
  max-width: calc(100% - 6rem); }
  @media screen and (max-width: 480px) {
    .inner {
      max-width: calc(100% - 3rem); } }





/* Icon */
.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative; }
  .icon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important; }
  .icon > .label {
    display: none; }

/* Banner */
#banner {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  color: rgba(255, 255, 255, 0.5);
  -moz-align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  
  border-top: 0;
  display: -ms-flexbox;
  height: 100vh !important;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%; }
  #banner input, #banner select, #banner textarea {
    color: #ffffff; }
  #banner a {
    color: #ffffff; }
  #banner strong, #banner b {
    color: #ffffff; }
  #banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
    color: #ffffff; }
  #banner blockquote {
    border-left-color: rgba(255, 255, 255, 0.25); }
  #banner code {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.25); }
  #banner hr {
    border-bottom-color: rgba(255, 255, 255, 0.25); }
  #banner input[type="submit"],
  #banner input[type="reset"],
  #banner input[type="button"],
  #banner button,
  #banner .button {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px #ffffff;
    color: #ffffff !important; }
    #banner input[type="submit"]:hover,
    #banner input[type="reset"]:hover,
    #banner input[type="button"]:hover,
    #banner button:hover,
    #banner .button:hover {
      box-shadow: inset 0 0 0 1px #ffffff;
      color: #ffffff !important; }
      #banner input[type="submit"]:hover:active,
      #banner input[type="reset"]:hover:active,
      #banner input[type="button"]:hover:active,
      #banner button:hover:active,
      #banner .button:hover:active {
        background-color: rgba(206, 27, 40, 0.25); }
    #banner input[type="submit"].primary,
    #banner input[type="reset"].primary,
    #banner input[type="button"].primary,
    #banner button.primary,
    #banner .button.primary {
      box-shadow: none;
      background-color: #ffffff;
      color: #ffffff !important; }
      #banner input[type="submit"].primary:hover,
      #banner input[type="reset"].primary:hover,
      #banner input[type="button"].primary:hover,
      #banner button.primary:hover,
      #banner .button.primary:hover {
        background-color: #ffffff;
        box-shadow: none; }
        #banner input[type="submit"].primary:hover:active,
        #banner input[type="reset"].primary:hover:active,
        #banner input[type="button"].primary:hover:active,
        #banner button.primary:hover:active,
        #banner .button.primary:hover:active {
          background-color: #ffffff; }
  #banner label {
    color: #ffffff; }
  #banner input[type="text"],
  #banner input[type="password"],
  #banner input[type="email"],
  #banner input[type="tel"],
  #banner input[type="search"],
  #banner input[type="url"],
  #banner select,
  #banner textarea {
    background-color: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.25); }
    #banner input[type="text"]:focus,
    #banner input[type="password"]:focus,
    #banner input[type="email"]:focus,
    #banner input[type="tel"]:focus,
    #banner input[type="search"]:focus,
    #banner input[type="url"]:focus,
    #banner select:focus,
    #banner textarea:focus {
      border-color: #ce1b28;
      box-shadow: 0 0 0 1px #ce1b28; }
  #banner select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.25)' /%3E%3C/svg%3E"); }
    #banner select option {
      color: rgba(255, 255, 255, 0.5);
      background-color: #111111; }
  #banner input[type="checkbox"] + label,
  #banner input[type="radio"] + label {
    color: rgba(255, 255, 255, 0.5); }
    #banner input[type="checkbox"] + label:before,
    #banner input[type="radio"] + label:before {
      background: rgba(255, 255, 255, 0.075);
      border-color: rgba(255, 255, 255, 0.25); }
  #banner input[type="checkbox"]:checked + label:before,
  #banner input[type="radio"]:checked + label:before {
    background-color: #ce1b28;
    border-color: #ce1b28;
    color: #ffffff; }
  #banner input[type="checkbox"]:focus + label:before,
  #banner input[type="radio"]:focus + label:before {
    border-color: #ce1b28;
    box-shadow: 0 0 0 1px #ce1b28; }
  #banner ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.4) !important; }
  #banner :-moz-placeholder {
    color: rgba(255, 255, 255, 0.4) !important; }
  #banner ::-moz-placeholder {
    color: rgba(255, 255, 255, 0.4) !important; }
  #banner :-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.4) !important; }
  #banner ul.alt li {
    border-top-color: rgba(255, 255, 255, 0.25); }
  #banner table tbody tr {
    border-color: rgba(255, 255, 255, 0.25); }
    #banner table tbody tr:nth-child(2n + 1) {
      background-color: rgba(255, 255, 255, 0.075); }
  #banner table th {
    color: #ffffff; }
  #banner table thead {
    border-bottom-color: rgba(255, 255, 255, 0.25); }
  #banner table tfoot {
    border-top-color: rgba(255, 255, 255, 0.25); }
  #banner table.alt tbody tr td {
    border-color: rgba(255, 255, 255, 0.25); }
  #banner .highlights .content {
    background: #111111;
    box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 0.025); }
  #banner .testimonials .content {
    background: #111111;
    box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 0.025); }
    #banner .testimonials .content .credit strong {
      color: #ce1b28; }
  #banner > .inner {
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    transform: scale(1.0);
    -moz-transition: opacity 1s ease, -moz-transform 1s ease;
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    -ms-transition: opacity 1s ease, -ms-transform 1s ease;
    transition: opacity 1s ease, transform 1s ease;
    opacity: 1;
    position: relative;
    z-index: 3; }
    #banner > .inner > :last-child {
      margin-bottom: 0; }
  #banner h1 {
    font-size: 2.50rem;
    margin-bottom: 1rem; }
 #banner h2 {
    font-size: 2.05rem;
    margin-bottom: 1rem; }
  #banner p {
    font-size: 1.5rem; }
  #banner video {
    -moz-transform: translateX(50%) translateY(50%);
    -webkit-transform: translateX(50%) translateY(50%);
    -ms-transform: translateX(50%) translateY(50%);
    transform: translateX(50%) translateY(50%);
    bottom: 20%;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    overflow: hidden;
    position: absolute;
    right: 50%;
    width: auto; }
    #banner:before {
    -moz-transition: opacity 3s ease;
    -webkit-transition: opacity 3s ease;
    -ms-transition: opacity 3s ease;
    transition: opacity 3s ease;
    -moz-transition-delay: 0.25s;
    -webkit-transition-delay: 0.25s;
    -ms-transition-delay: 0.25s;
    transition-delay: 0.25s;
    background: #111111;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.2;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1; }
  #banner:after {
 content: '';
  opacity: 0.2;
  background: #111111; /* Old browsers */
  background: -moz-linear-gradient(top, #464ef5 0%, #111111 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #464ef5 0%,#111111 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #464ef5 0%,#111111 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464ef5', endColorstr='#111111',GradientType=0 ); /* IE6-9 */
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    webkit-linear-gradientidth: 100%;
    width: 100%;
    z-index: 1; }
  #banner.small {
    height: 30vh !important;
    min-height: 30vh; }
  @media screen and (max-width: 1280px) {
    #banner video {
      display: none; } }
  @media screen and (max-width: 736px) {
    #banner {
      height: 87vh !important;
      min-height: 0;
      padding: 4rem 2rem 4rem 2rem; }
      #banner .inner {
        width: 100%; }
      #banner h1 {
        font-size: 2.50rem;
        margin-bottom: 0.5rem;
        padding-bottom: 0; }
       #banner h2 {
    font-size: 2.05rem;
           margin-bottom: 0.5rem;
        padding-bottom: 0; }
      #banner p {
        font-size: 1.25rem; }
      #banner br {
        display: none; }
      #banner .button {
        width: 100%; } }
  @media screen and (max-width: 480px) {
    #banner p {
      font-size: 1rem; } }
  body.is-preload #banner .inner {
    -moz-transform: scale(0.99);
    -webkit-transform: scale(0.99);
    -ms-transform: scale(0.99);
    transform: scale(0.99);
    opacity: 0; }
  body.is-preload #banner:before {
    opacity: 1; }



.demo-video-wrapper {
     background: #242a49;
	
}
/* Video overlay and content */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  opacity: 8.3;
}

.video-hero--content {
  position: relative;
  text-align: center;
  color: #FFF;
  height: 100vh !important;
  min-height: 100vh;
    
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.jquery-background-video-wrapper {
	position: relative;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    	background-size: cover;
}
.jquery-background-video {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	-o-object-fit: cover;
	   object-fit: cover;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
	    	transform: translate(-50%,-50%);
}



/* Image */

.image {
        background-color: #ffffff;
        border-radius: 0;
		display: inline-block;
		padding: 0;
        box-shadow: 0;
	}
		.image.left, .image.right {
			max-width: 5%;
            	margin: 0 0 0 0 ;
		}

			.image.left img, .image.right img {
				width: 75%;
                	margin: 0 0 0 0;
			}

		.image.left {
			float: left;
			margin: 0 0 0 0;
			top: 0;
		}

		.image.right {
			float: right;
			margin: 0 0 0 0;
			top: 0;
		}

		.image.fit {
			display: block;
			margin: 0 0 0 0;
			width: 85%;
		}

			.image.fit img {
				width: 85%;
			}

		.image.round {
			border-radius: 85%;
		}

			.image.round img {
				border-radius: 85%;
			}

		.image.main {
			display: block;
			margin: 0 0 0 0;
			width: 85%;
		}

			.image.main img {
				width: 85%;
			}

/* Box */

	.thumbnails {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: stretch;
		-webkit-align-items: stretch;
		-ms-align-items: stretch;
		align-items: stretch;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

		.thumbnails .box {
			margin: 0 0 0 0;
			width: 20%;
		}

			@media screen and (max-width: 1280px) {

				.thumbnails .box {
					width: 35%;
				}

			}

			@media screen and (max-width: 736px) {

				.thumbnails .box {
					width: 90%;
				}

			}