@font-face {
    font-family: 'MyWebFont';
    src:  url(' https://d1g145x70srn7h.cloudfront.net/fonts/sqmarket/sqmarket-regular.woff2') format('woff2');
  }

* {
    box-sizing: border-box;
  }
  
  /* Style the body */
body {
font-family: Arial, Tahoma, Helvetica, Arial, sans-serif;
margin: 0;
background: rgb(24, 24, 24);  
}

/* Header/logo Title */
.header {
padding: 15px;
max-width: 1200px;
margin: auto;
text-align: left;
background: #8EAADB;
color: white;
background-image: url("autumn.jpg");
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when 
    the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
    on the container's size */
background-size: cover;
/* Set a background color that will be displayed
    while the background image is loading */
background-color: #111111;
}


/* Style the tab */
.tab {
overflow: hidden;
max-width: 1200px;
margin: auto;
background-color: rgb(255, 255, 255);
position: sticky;
position: -webkit-sticky;
top: 0;
padding: 10px 12px;  
border-bottom: 1px solid #ccc;
z-index: 999;
/*background-color: #f1f1f1;*/
}
/* Style the buttons inside the tab */
.tab button {
color: rgb(0, 0, 0);
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px 8px;
transition: 0.3s;
font-size: 15px;
font-weight: normal;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
border-radius: 5px;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: rgb(255, 255, 255);
}
@media screen and (max-width: 410px) {
    .tab button {
        font-size: 14px;
        padding: 8px 6px;
    }
}
@media screen and (max-width: 361px) {
    .tab button {
        font-size: 13px;
        padding: 7px 5px;
    }
} 

/* Content*/
.content {
max-width: 1200px;
margin: auto;
background: white;
}
.main {
padding: 15px;
font-size: 10pt;
}
.responsive80 {
    width: 80%;
    }
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 870px) {
    .responsive80 {
        width: 95%;
    }
} 
@media screen and (max-width: 600px) {
    .responsive80 {
        width: 100%;
    }
}     

h4 {
color: rgb(36, 36, 36);
text-align: center;
font-size: 11pt;
margin: auto;
font-weight: lighter;
line-height: 1.5;
}
.styledparagraph {
text-align: left;
font-size: 11pt;
font-weight: lighter;
line-height: 1.5;
color: rgb(36, 36, 36);
}

/* Get Unlock Code button*/
.getunlockbutton {
    background-color: rgb(82, 170, 197);
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 12pt;
    }
.getunlockbutton:hover {
    background-color: rgb(124, 150, 230);
}
/* Carousel customization */
.carousel-cell {
    width: 33%; /* half-width */
    height: 320px;
    margin-right: 10px;
  }
@media screen and (max-width: 800px) {
.carousel-cell {
    width: 50%;
    }
}     
@media screen and (max-width: 500px) {
    .carousel-cell {
        width: 100%;
    }
}     


/* testimonials slider geometry */
.tsl {
	padding: 40px 10%;
}
.tsl-list {
	list-style-type:none;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}
.tsl-item {
	position:relative;
	top:0;
	left:100%;
	margin-left:-100%;
	width:100%;
	float:left;
	animation: tsl-fade-in-out 110s infinite;
	animation-play-state:running;
}

/* lets hide all items from second */
.tsl-item + .tsl-item {
	opacity:0;
}

/* animation */

/* animation shift */
/* negative delay needed to pause works correctly on hover */
.tsl-item:nth-child(2) {
	animation-delay: -105s;
}
.tsl-item:nth-child(3) {
	animation-delay: -100s;
}
.tsl-item:nth-child(4) {
	animation-delay: -95s;
}
.tsl-item:nth-child(5) {
	animation-delay: -90s;
}
.tsl-item:nth-child(6) {
	animation-delay: -85s;
}
.tsl-item:nth-child(7) {
	animation-delay: -80s;
}
.tsl-item:nth-child(8) {
	animation-delay: -75s;
}
.tsl-item:nth-child(9) {
	animation-delay: -70s;
}
.tsl-item:nth-child(10) {
	animation-delay: -65s;
}
.tsl-item:nth-child(11) {
	animation-delay: -60s;
}
.tsl-item:nth-child(12) {
	animation-delay: -55s;
}
.tsl-item:nth-child(13) {
	animation-delay: -50s;
}
.tsl-item:nth-child(14) {
	animation-delay: -45s;
}
.tsl-item:nth-child(15) {
	animation-delay: -40s;
}
.tsl-item:nth-child(16) {
	animation-delay: -35s;
}
.tsl-item:nth-child(17) {
	animation-delay: -30s;
}
.tsl-item:nth-child(18) {
	animation-delay: -25s;
}
.tsl-item:nth-child(19) {
	animation-delay: -20s;
}
.tsl-item:nth-child(20) {
	animation-delay: -15s;
}
.tsl-item:nth-child(21) {
	animation-delay: -10s;
}
.tsl-item:nth-child(22) {
	animation-delay: -5s;
}

/*
we have 5 items.
we want each slide plays ≈5s

each slide will play 1/5 of animation = 20%
1% of animation is for transitions (fading)
*/

@keyframes tsl-fade-in-out {
	0% {
		opacity:0;
		z-index:2;
	}
	1% {
		opacity:1;
		z-index:2;
	}
	4.5% {
		opacity:1;
	}
	5.5% {
		opacity:0;
		z-index:1;
	}
	100% {
		opacity:0;
	}
}

/* pause on hover */
.tsl-list:hover .tsl-item {
	animation-play-state:paused;
}

/* testimonials theme */
.tsl-content {
    font-size: 12pt;
    font-weight: lighter;
    line-height: 1.5;
}
.tsl-name {
	font-weight: bold;
}
.tsl-date {
	color: #555;
}

/*.tsl-content p {
	margin-top:0;
}*/
.tsl-meta {
	font-size: 13pt;
	text-align:left;
}
/*.tsl-meta p {
	margin-bottom:0;
}*/

/* thats all */



/* Video responsive */
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


/* Style the table */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 0px;
}
/* Style table headers and table data */
th {
text-align: left;
vertical-align: top;
font-size: 11pt;
font-weight: bold;    
padding: 16px;
}
td {
text-align: left;
vertical-align: top;
font-size: 11pt;
font-weight: lighter;
padding: 16px;
}  
th:first-child, td:first-child {
text-align: left;
}
/* Zebra-striped table rows */
tr:nth-child(even) {
background-color: #f2f2f2;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

/* Responsive table rows to column */
@media screen and (max-width: 640px) {
    thead.collapsable th.collapsable:not(:first-child) {
        display: none;
    }
    /*thead th:first-child:after {
        content: "'s";
    }*/
    th.collapsable, td.collapsable {
        display: block;
        width: 100% !important;
        padding: 0px 14px;
    }
    td.collapsable:first-child, th.collapsable:first-child {
        font-weight: bold;
        padding: 10px 10px 0px 14px;
    }
    td.collapsable:nth-child(even), th.collapsable:nth-child(even) {
        padding: 0px 10px 20px 36px;
    }
    /*td[data-th]:before {
        content: attr(data-th);
        /*border-radius: 10px 0px 0px 10px;*/
        /*font-weight: bold;
        /*min-width: 10rem;*/
        /*display: inline-block;
    }*/
}

.fa-check {
color: green;
}
.fa-remove {
color: red;
} 
/* QA styles */
.question {
border-bottom-style:solid;
border-width: 1px;
border-color: grey;
padding-bottom:5px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
/* Acordion */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 15px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 14px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
/*content: '\002B';*/
font-family: "Font Awesome 5 Free";
content: '\f078';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion-active:after {
	font-family: "Font Awesome 5 Free";
	content: '\f077';
	font-weight: bold;    
/*content: "\2212";*/
}
.accordion-panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}



/*Card Images*/
.twocolumn {
float: left;
width: 50%;
margin-bottom: 16px;
padding: 0 8px;
}
@media screen and (max-width: 740px) {
.twocolumn {
    width: 100%;
}
}
.threecolumn {
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}
@media screen and (max-width: 840px) {
.threecolumn {
    width: 100%;
}
}

.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
}
.cardcontainer {
padding: 0px 16px;
}
.cardcontainer::after, .cardrow::after {
content: "";
clear: both;
display: table;
}



/* Form */
/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}

input[type=email], select, textarea{
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}

/* Style the label to display next to the inputs */
label {
padding: 6px 6px 6px 0;
display: inline-block;
}

.btn {
    background-color: #464646;
    color: white;
    padding: 12px;
    margin: 10px 0;
    border: none;
    width: 100%;
    border-radius: 3px;
    cursor: pointer;
    font-size: 15px;
  }

.btn:hover {
    background-color: #8d8d8d;
}

/* Style the container */
.formContainer {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
}

/* Floating column for labels: 25% width */
.col-25 {
float: left;
width: 40%;
margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
float: left;
width: 60%;
margin-top: 6px;
}

/* Clear floats after the columns */
.formRow:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 450px) {
.col-25, .col-75 {
    width: 100%;
    margin-top: 0;
}
} 



/* Footer */
.footer {
font-size: 15px;
font-weight: lighter;
padding: 10px;
text-align: right;
vertical-align: bottom;
color: rgb(241, 241, 241);
background: rgb(46, 46, 46);
}

.smbutton {
font-size: 22px;
color: rgb(243, 243, 243);
text-decoration: none;
}

.smbutton:hover {
opacity: 0.7;
}