/*

    

Printox - The best way to print



*/





@import url(fontawesome.css);

body {

    font-family: 'Montserrat', sans-serif;

    background: url(../images/BG-Grey-04.png);

  background-position: center;

    background-size: cover;

    background-attachment: fixed;

  background-repeat: no-repeat;

}



/* PRODUCT-SINGLE */



* {

  box-sizing: auto;

}



.column1 {

  float: left;

  width: 62%;

  padding: 10px 40px 10px 10px;

  margin: 30px 20px 0px 20px;

}

.column12 {

  float: left;

  width: 62%;

  padding: 10px 40px 10px 10px;

  margin: 30px 20px 0px 20px;

}
.column1 .product_title {

    font-size:24px; font-weight:800; margin-left:20px;

}

.column1 .tab .column {

    height: 75px;

    width: 5%;

    margin: 0 13px 0 13px;

}

.column1 .tab .column img {

  width: 100%;

}



.column2 {

  float: left;

  width: 33%;

  padding:10px;

    margin-right: 20px;

    margin-top: 80px;

}

.column2 img {

    width: 423px;

}

.column2 iframe {

    width: 100%;

    height: 340;

}



.row:after {

  content: "";

  display: table;

  clear: both;

}



/*  Tabs  */

.tabs {

	display: flex;

	flex-wrap: wrap;

    margin: 20px 20px;

    color: #f5f5f5; 

}

.tabs label {

	order: 1;

	display: block;

	padding: 0.7rem 1rem;

	margin-right: 1rem;

    margin-bottom: 0px;

	cursor: pointer;

  background: #2E384B;

    font-size: 14px;

    text-align: center;

  font-weight: 600;

    color: #f5f5f5;

  transition: background ease 0.2s;

    border: 1px solid #455163;

    border-radius: 8px 8px 0 0;

}

.tabs .tab {

  order: 99; 

  flex-grow: 1;

	width: 100%;

	display: none;

  padding: 0.5rem 0rem 0rem 0rem;

    line-height: 1.7;

    color: #f5f5f5;

    font-size: 13px;

     border-top: 1px solid #45BABA;

}

.tabs .tab h2 {margin-top: 0px; font-size:13px; font-weight:400; line-height:1.7;}

.tabs input[type="radio"] {

	display: none;

}

.tabs input[type="radio"]:checked + label {

	background: #346F74;

}

.tabs input[type="radio"]:checked + label + .tab {

	display: block;

}



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

  .column1 {

  width: 100%;

  padding: 10px;

  margin: 30px 20px 0px 20px;

}

.column1 .product_title {

    font-size:18px;

}  

    .column1 .tab .column {

    width: 10%;

}

    .tabs .tab,

  .tabs label {

    order: initial;

  }

  .tabs label {

    /* width: 23%; */

    width: max-content;

    margin-right: 8px;

    margin-top: 0rem;

    padding: 0.7rem 0.5rem;

    font-size: 12px;

  }

    .column2 {

  width: 100%;

    margin: 50px 38px;

}

}



/**

 * Generic Styling

*/

body {

  min-height: 100vh;

  line-height: 1.5;

  max-width: auto;

}



/* Accordins */

.accordion-content {
  overflow: visible;  
  max-height: none;   
  height: auto;      
}


/* //updated ver */

* {

  box-sizing:border-box;

}

/* body { 



} */

.accordion dl,

.accordion-list {

  

   &:after {

       content: "";

       display:block;

     }

}

.accordion dd,

.accordion__panel {

   background-color:auto;

   font-size:1em;

   line-height:1.5em; 

}

.accordion a {

  padding:0.5em 0em 0.5em 0em;

}



.accordion {

    position:relative;

    background-color:auto;

    padding: 0px;

    margin: 0px;

}

.container {

  margin:0 0;

  padding: 0;

}

.accordionTitle,

.accordion__Heading {

    background-color: auto; 

   text-align:left;

    font-weight:600; 

    padding:0em;

    display:block;

    text-decoration:none;

    color:#45BABA;

    transition:background-color 0.5s ease-in-out;

    border-top:1px dashed #455163;

  &:before {

   content: "+";

   font-size:1.5em;

   line-height:0.5em;

   float:left; 

   transition: transform 0.3s ease-in-out;

  }

  &:hover {

      color: #4CECED;

  }

}

.accordionTitleActive, 

.accordionTitle.is-expanded {

   background-color:darken(#4CECED, 10%);

    &:before {

     

      transform:rotate(-225deg);

    }

}

.accordionItem {

    height:auto;

    overflow:hidden; 

    

     /* max-height:50em; */

    transition:max-height 1s;

}

 

.accordionItem.is-collapsed {

    max-height:0;

}

.no-js .accordionItem.is-collapsed {

  max-height: auto;
  overflow: visible !important;

}

.animateIn {

     animation: accordionIn 0.45s normal ease-in-out both 1; 

}

.animateOut {

     animation: accordionOut 0.45s alternate ease-in-out both 1;

}

@keyframes accordionIn {

  0% {

    opacity: 0;

    transform:scale(0.9) rotateX(-60deg);

    transform-origin: 50% 0;

  }

  100% {

    opacity:1;

    transform:scale(1);

  }

}



@keyframes accordionOut {

    0% {

       opacity: 1;

       transform:scale(1);

     }

     100% {

          opacity:0;

           transform:scale(0.9) rotateX(-60deg);

       }

}



* {

  box-sizing: border-box;

}



.row::after {

  content: "";

  clear: both;

  display: table;

}





.device-mockup {

	position: relative;

	width: 100%;

	padding-bottom: 55.775701%;

  text-align:center;

}



	.device-mockup > .device {

		position: absolute;

		top: 0; bottom: 0; left: 0; right: 0;

		width: 100%; height: 100%;

		background-size: 100% 100%;

		background-repeat: no-repeat;

		background-image: url(../images/Printox-Mockup.png);

	}



		.device-mockup > .device > .screen {

			position: absolute;

			top:    17.7%;

			bottom: 7%;

			left:  0%;

			right:  9%;

			overflow: hidden;

		}



        #carousal{

            position: relative;

            width:355px;

            height: 250px;

            overflow: hidden;

            margin:0 auto;

        }

        .list-carousal{

            margin:0;

            list-style: none;

            width: 100% !important;

            height: 250px;

            float:left;

            padding: 0;

        }

        #content{

            position: absolute;

            top:0;

            left:0;

            width:calc(330px * 5);

            height: 250px;

            animation: toLeft 6s ease-out infinite alternate;

            margin: 0;

            padding: 0;

        }



        @keyframes toLeft {

            0%,15%{

                margin-left: 0;

                opacity:1;

            }

            20%,35%{

                margin-left: -355px;

            }

            40%,55%{

                margin-left: -710px;

            }

            60%,75% {

                margin-left: -1065px;

            }

            80%,100% {

                margin-left: -1420px;

                opacity:1;

            }

        }



/** Sale Banner **/



.sale-banner--inner {

  text-align: center;

}

.sale-banner--turquoise {

  background-color: rgba(46, 56, 75, 0.6);

    border: 1px dashed #455163;

    border-radius: 0 30px;

    margin: 0 50px 30px 20px;

    font-size: 13px;

}

.sale-banner--promo {

  display: inline-block;

  text-align: center;

  width: 100%;

  cursor:pointer;

  padding: 0;

    font-size: 13px;

}

.sale-banner--promo:hover {

  text-decoration:none;

}

.sale-banner--product { 

    -moz-transition: all .2s ease-in;

    -o-transition: all .2s ease-in;

    -webkit-transition: all .2s ease-in;

    transition: all .2s ease-in;

}

/* .sale-banner--promo:hover .sale-banner--saving { 

} */

.sale-banner--promo:hover .sale-banner--product { 

    background-color: #346F74;

    color: #f5f5f5;

}

.sale-banner--saving {

  background-color:#346F74;

    margin: 15px 0 0 0;

    padding: 3px 0px;

  display:block;

  width:100%;

  font-size:14px;

  line-height:1.4em;

    border-radius: 0 10px;

}

.sale-banner--product {

  text-align:center;

  border: 1px dashed #45BABA;

  border-radius: 30px;

  padding: 6px 5px;

  color:#45BABA;

  margin: 0 auto 10px;

  font-size:14px;

    font-weight: 500;

  display:block;

}

.sale-banner--pink .sale-banner--product {

    background-color:auto;

    margin-top: 10px;

}

.sale-banner--pink .sale-banner--saving {

    color:#f5f5f5;

}

.sale-banner--heading strong {

  display: inline-block;

     font-size: 14px;

      padding: 18px 0 0 0;

    color: #f5f5f5;

}



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

  .sale-banner--heading {

      font-size: 13px;

      margin: 15px 65px;

      color: #f5f5f5;

  }

  .sale-banner--saving {

    font-size:14px; font-weight: 500;

        margin:0;

      padding: 8px 0px;

  }

  .sale-banner--product {

    font-size:13px;

    margin: 0 66px 20px;

  }

}







/* Add to Cart Form */

body{

	margin-left: 0px;

	padding: 0;

	color: #ddd;

    max-width: auto;

}



h1, h2, h3, h4, h5, h6{

	font-weight: 500;

}



h2{

	font-size: 18px;

    font-weight: 600;

	padding: 15px 0;

    color: #f5f5f5;

}



p {

	font-size: 16px;

    font-weight: 500;
}



/* CONTAINERS */



.container {max-width: auto; width: 100%; margin: 0 auto; }

.four { width: 23.26%; max-width: 23.26%;}





/* COLUMNS */



.col {

  display: block;

  float:left;

  margin: 0 0% 1.6% 1.6%;

    border-radius: 5px;

}



.col:first-of-type { margin-left: 0; }



/* CLEARFIX */



.cf:before,

.cf:after {

    content: " ";

    display: table;

}



.cf:after {

    clear: both;

}



.cf {

    zoom: 1;

}



/* FORM */



.form .plan input, .form .payment-plan input, .form .thickness-plan input, .form .payment-type input{

	display: none;

}



.form label{

	position: relative;

	color: #f5f5f5;

	background-color: #2E384B;

	font-size: 16px;

    font-weight: 600;

	text-align: center;

    /* vertical-align: middle; */

	height: 200px !important;

  /* max-height: 260px; */

  padding: 10px;

    /* padding: 20px 5px; */

	display: block;

	cursor: pointer;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

  border: 2px solid transparent !important;

  margin-left: 0px;

  margin-right: 10px;

  display: flex;

  justify-content: center;

  align-items:  center;

  flex-direction: column;
}



.form label img{padding-bottom: 8px;}

.form label span{font-size: 12px; color: #f5f5f5; font-weight: 400;}



.form .plan input:checked + label, .form .thickness-plan input:checked + label, .form .payment-plan input:checked + label, .form .payment-type input:checked + label{

	border: 2px solid #45BABA;

    border-radius: 5px;

	background-color: #346F74;

}



.form .plan input:checked + label:after, .form .thickness-plan input:checked + label:after, form .payment-plan input:checked + label:after, .form .payment-type input:checked + label:after{

	content: "\2713";

	width: 40px;

	height: 40px;

	line-height: 40px;

	border-radius: 100%;

	border: 2px solid #45BABA;

	background-color: #346F74;

	z-index: 999;

	position: absolute;

	top: -10px;

	right: -10px;

}



.submit{

	padding: 11px 50px;

	display: inline-block;

	border: none;

	margin: 20px 0;

    text-align: center;

	background-color: #45BABA;

	color: #f5f5f5;

	border: 2px solid #346F74;

    border-radius: 222px;

	font-size: 14px;

	-webkit-transition: transform 0.3s ease-in-out;

	-o-transition: transform 0.3s ease-in-out;

	transition: transform 0.3s ease-in-out;

}



.submit:hover{

	cursor: pointer;

    background-color: #346F74;

	transform: rotateX(360deg);

}



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

    .container {margin: 0 30px; }

.four { width: 40%; max-width: 50%;}

    .col { display: inline-block; /*float:left;*/ margin: 2% 2%; }

    h2{margin: 12px 30px 0 0; }

    p {	padding: 8px 60px 0 0; }

}











.breadcrumb,

.breadcrumb a {

  height: 33px;

  display: inline-block;

}



.breadcrumb { 

  margin-left: 22px;

  padding: 0;

  border-radius: 111px;

  border-width: 1px;

  border-style: solid;

  overflow: hidden;

}

		.breadcrumb a {

      text-rendering: optimizeLegibility;

      line-height: 33px;

    	font-size: 12px;

      font-weight: 300;

			text-decoration: none;

      padding: 0 10px 0 20px;

			position: relative;

		}

		.breadcrumb a:first-child {

		  padding-left: 16px;

		}

    .breadcrumb a:last-child,

    .breadcrumb input[type=text] {

      padding-right: 16px;

    }

		.breadcrumb a:after,

    .breadcrumb a:before { 

			content: ''; 

			display: block; 

			width: 0; 

			height: 0;

			border-top: 17px solid transparent;

			border-bottom: 17px solid transparent;

      border-left: 10px solid transparent;

			position: absolute;

      margin: auto;

			top: 0;

      bottom: 0;

			left: 100%;

			z-index: 2;

		}

		.breadcrumb a:before { 

      margin-left: 2px;

			z-index: 1;

		}



		.breadcrumb a:last-child {

      color: #fff;

		}



    .breadcrumb a:last-child {

			pointer-events: none;

			cursor: default;

		}

		.breadcrumb a:last-child:after,

    .breadcrumb a:last-child:before,

    .breadcrumb input[type=text] {

		   border: none;

    }

    .breadcrumb input[type=text]:hover,

    .breadcrumb input[type=text]:focus {

      width: 100px;

    }





.dark .breadcrumb {

  border-color: #01050C;

}

  .dark .breadcrumb a {

    color: #ddd;

    background-color: #272D3A;

    text-shadow: 0 -1px rgba(0,0,0,.7);

    box-shadow: inset 0 1px 0 #0E1421;

  } 

    .dark .breadcrumb a:after {

      border-left-color: #272D3A;

    }

		.dark .breadcrumb a:before { 

			border-left-color: #01050C;

		}

		.dark .breadcrumb a:hover {

		   background: #0E1421;

    }

		.dark .breadcrumb a:hover:after {

		  border-left-color: #0E1421;

    }

    .dark .breadcrumb a:active:before {

      border-left-color: #151A28;

    }



    .dark .breadcrumb a:last-child,

    .dark .breadcrumb input[type=text] {

      background-color: #151A28;

      box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

    }

    

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

    .breadcrumb a {

      line-height: 30px;

    	font-size: 11px;

		}

}