/*
This is for the grid sections of the cruise news and the webpage on startpage




*/

#designdeals {
	display: block;
	}
#dealssection {
	padding-left:30px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
/*for cruise news layout*/
.thirdpage66left {
	width: 75%;
	float: left;
}

.thirdpage33right {
	width: 25%;
	float: right;
}

.grid {
  width: 1200px;
  max-width: 100%;
  display: grid;
  margin: auto;
  grid-template-columns: repeat(auto-fill, minmax(15px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(15px, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: row dense;
  grid-gap: 15px;
  counter-reset: boxes;
}

.box {
  position: relative;
  background-color: var(--white);
  color: rgba(255, 255, 255, 0.7);
  font-size: 2rem;
  font-family: sans-serif;
  counter-increment: boxes;
  border: 1px white solid;
  
}
/*removed these from in between the braces above
&::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 50%;
  }

  &::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: counter(boxes);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
  }
  */
/*THESE ARE THE BOX STYLES WHICH CAN BE CHANGED BUT THEN NEED THE CSS FOR THE OFFER CHANGED TO MATCH USING EXISTING CLASSES */

.blue {
  background: #4040e7;
  border: 5px solid rgba(0, 0, 0, 0.5);
}

.red {
  background: #db3c3c;
  border: 5px solid rgba(0, 0, 0, 0.5);
}

.green {
  background: #3ddb3d;
  border: 5px solid rgba(0, 0, 0, 0.5);
}

.tall {
  grid-column: span 5;
  grid-row: span 10;
}

.wide {
  grid-column: span 30;
  grid-row: span 8;
  margin-bottom: 15px;
}

.square {
  grid-column: span 10;
  grid-row: span 15;
  background-color: var(--white);
}
.small {
  grid-column: span 10;
  grid-row: span 5;
  background-color: var(--white);
}

.shuffleWrap {
  padding: 20px;
  display: flex;
  justify-content: center;
}

@media (max-width: 500px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .wide {
    grid-column: span 1;
  }
}

/*END OF THE GRID STYLING*/

.CNtitle {
	padding-left: 40px;
	margin-top: -30px;
	Margin-bottom: 20px;
}
.CNtitle h1 {
	margin-top: -50px;
	font-family: "Abril Fatface", serif;
	color: var(--bestatpale);
	font-style: normal;
	font-weight: 700;
	font-size: 5em;
}
.CNtitle h3 {
	font-family: "Satisfy", cursive;
	font-weight: 400;
	font-style: normal;
	padding-left: 300px;
	color: var(--bestat);
	font-size: 3em;
	margin-top: -40px;
}

.dealbox {
	position: relative;
	border-radius: 5px;
	height: 100%;
	width: 100%;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.boxcontain {
		position: relative;
	width: 100%;
	height: 100%;
}

.featurehead {
	display: flex;
	justify-content: space-between;
	border-radius: 5px 5px 0 0;
	padding: 3px 0 9px 20px;
	background-color: var(--action);
	color: var(--mainback);
	font-weight: bold;
	height: 11%;
	
}
.featurehead h2{
	font-size: 0.7em;
	font-weight: bold;
}
.feature {
	width: 40%;

}
.featureresort {
	width: 40%;
	text-align: right;
	padding-right: 20px;
	text-transform:uppercase;
}
.dealarea {
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	height: 89%;
}
.deal-left {
	position: relative;
	width: 40%;
	height: 100%;
	
}

.dealpic {
	height:89%;
	border-radius: 0 0 0 5px;
}
.dealprice{
	position: absolute;
	bottom:0;
	left: 0;
	display: flex;
	background-color: var(--mainfont);
	color: var(--mainback);
	height:19%;
	width: 100%;
	border-radius: 0 0 0 5px;
}
.dprice {
	
	padding: 5px 0 0 20px;
	width: 75%;
}
.dpricecat {
	background-color: var(--mainback);
	width: 25%
}
.dpricecat h2{
	
	text-align:center;
	font-size: 0.5em;
	font-weight: bold;
	color: var(--white);
}
.cattext {
	vertical-align: middle;
	padding: 10px;
}
.dealprice h3{
	font-size: 1em;
	color: var(--darkfont);
	font-weight:bolder;
}
.pricetype {
	margin-top: -40px;
	font-size: 0.5em;
	color : var(--mainback);
	font-weight: bold;
}
.deal-right {
	height: 89%;
	padding: 5px;
	width: 58%;

}
.deal-title h3{
	display: block;
	font-size: 0.6em;
	text-align:center;
	font-weight: 700;
	height:10%;
	color: var(--mainback);
	padding-top: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.rightarea {
	height: 60%;
	display: flex;
	margin-top: 5px;
}
.deal-right-left {
	padding: 10px;
	
	width: 50%;
	max-width: 50%;
	min-height: 65%;
	max-height: 65%;
}

.deal-list{
	
}
.deal-list h3{
	font-size: 0.4em;
	overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 12;
  -webkit-box-orient: vertical;
	color: var(--mainback);
}
.lowprice {
	color: var(--white);
	font-size: 0.35em;
	padding-top: 2px;
}
.deal-right-right {
	padding: 10px;
	padding-top: 25px;
	width: 50%;
	min-height: 65%;
	max-height: 65%;
}
.deal-highlight {
	background-color: red;
}
.dealbutton {

	position: absolute;
	
	padding-bottom: 10px;
	width: 57%;
	bottom:0;
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
	min-height: 15%;
	max-height: 15%;
	margin-right: 10px;
	margin-bottom: 5px;
}
.agentcontact {
	display: flex;
	justify-content: space-between;
	width: 38%;
}
.agentlogo{
	width: 40%;
	height: 100%;
	background-color: var(--white);
}
.agentphone {
	width: 60%;
	height: 100%;
	
}
.agentphone h3{
	font-size: 0.4em;
	font-weight: bold;
	padding: 15px 2px 15px 5px;
	color: var(--mainback);
}
.agentmail {
	width: 15%;
}
.agentmailicon i{
	width:100%;
    color: var(--mainback);
    font-size:1.1em;
    margin-left: 12px;
}

.agentmailicon i:hover{
	cursor:pointer;
	color: var(--mainfont);
	
}
.agentmailicon h5{
	cursor:pointer;
	color: var(--mainback);
	font-size: 0.4em;
	font-weight: bold;
}
.moreinfo {
	width: 28%;
	margin-right:5px;
	background-color: var(--action);
	border-radius: 5px;
	border:solid var(--white) 1px;
	text-align: center;
	
	padding: 6px;
	padding-top: 7spx;
	color: var(--white);
}
.moreinfo:hover {
	background-color: var(--white);
	color: var(--action);
	border:solid var(--action) 1px;
	cursor:pointer;
}
.moreinfo h3{
	
	font-weight: bold;
	font-size: 0.7em;
	
}
.mainback {
	color: var(--mainback);	
}
/*  square    */
.dealbox2 {
	border: 0.5px var(--bestatpale) solid;
	height: 100%;
	width:100%;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	background-color: var(--white);

}
/*  small   */
.dealbox3 {
	height: 100%;
	width:100%;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	background-color: var(--bestatblue);
	border: 0.5px var(--bestat) solid;
}

/*  wide    */
.dealbox4 {
	display: flex;
	border: 0.5px var(--bestatpale) solid;
	height: 100%;
	width:100%;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	background-color: var(--white);

}


.square .sqtop {
	
	display: flex;
	width: 100%;
	height: 35%;
}
.square .sqtopleft {
	
	width: 100%;
	height: 100%;
}

.square .sqtopright {
	width: 50%;
	
}
.square .sqtoprighttit { 
	display: block;
	height: 25%;
	width: 100%;
	border-radius: 0 5px  0 0;
	background-color: var(--mainfont);
	
}
.square .sqtoprighttit h2{
	
	color: var(--mainback);
	font-size: 0.6em;
	padding-left: 5px;
	padding-top:4px;
	padding-right: 4px;
	padding-bottom: 2px;
	text-align:center;
	font-weight: 700;
	border-radius: 0 5px  0 0;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	
}
.square .sqtoprightprice {
	color: var(--darkfont);
	font-size: 1em;
	text-align: center;
	padding-top: 10px;
}
.square .sqtoprightprice h3{
	font-weight: bold;
}
.square .sqtoprightpricetype {
	font-size: 0.6em;
	text-align: right;
	padding-right: 10px;
}
.square .sqtoprightpricetype h4{
	color: var(--mainback);
}
.square .sqtoprightcontact {
	padding-top: 15px;
	display: flex;
	justify-content: space-around;
}
.square .sqcontact {

	
	
}
.square .sqcontactphone {
	padding-top: 5px;
		text-align: center;
	color: var(--mainback);
	font-size: 0.35em;
}
.square .sqcontactphone h3{
	font-weight: bold;
}
.square .sqcontactemail {
	
}

.square .sqcontactemail .agentmailicon i{
	width:100%;
    color: var(--white);
    font-size:0.7em;
    margin-left: 34px;
}
.square .sqcontactemail .agentmailicon h5{
	cursor:pointer;
	color: var(--mainback);
	font-size: 0.4em;
	font-weight: bold;
}
.square .dealpicbox {
	position:relative;
	top: -51px;
	height:100%;
	border-radius: 5px 5px 0 0;
}
.square .dealpicboxnews {
	position:relative;
	top: 0px;
	height:100%;
	border-radius: 5px 5px 0 0;
}

.square .sqbott {
	background-color: var(--bestatgray);
	width: 100%;
	height: 65%;
	border-radius: 5px;
}
.square .sqdestination {
	display: block;
	text-transform: uppercase;
	padding-left: 10px;
	padding-top: 8px;
	padding-bottom: 3px;
	text-align:left;
	height:5%;
	white-space: nowrap;
	max-width: 40ch;
	width: 100%;
	min-width: 1px;
}
.square .sqdestination h3{
	font-size: 0.5em;
	font-weight: 700;
	color: var(--darkfont);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.square .sqhead {
	display: block;
	text-transform: uppercase;
	padding-left: 10px;
	padding-top: 8px;
	background-color: var(--bestatgray);
	text-align:left;
	height:20%;
	white-space: nowrap;
	max-width: 40ch;
	width: 100%;
	min-width: 1px;
}
.square .sqbotttitle {
	display: flex;
	justify-content: space-between;
	background-color: var(--bestatgray);
	height: 50%
}
.square .sqbotttitle h3{
	font-size: 0.5em;
	font-weight: 700;
	color: var(--bestat);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}

.square .sqbotname {
	display: block;
	padding-left: 20px;
	padding-bottom: 3px;
	text-align:left;
	height:50%;
	white-space: nowrap;
	max-width: 22ch;
	width: 98%;
	min-width: 1px;
	background-color: var(--bestatgray);
}
.square .sqbotname h3{
	font-size: 0.5em;
	font-weight: 700;
	color: var(--bestatpale);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}

.square .mainarea {
	height: 55%
}

.square .sqdescr {
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 15px;
	padding-bottom: 3px;
	text-align:left;
	height:100%;
	overflow: hidden;
	max-width: 22ch;
	width: 100%;
	min-width: 1px;
	background-color: var(--white);
}
.square .sqdescr h3{
	font-size: 0.4em;
	font-weight: 600;
	color: black;
	overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 9; /* number of lines to show */
           line-clamp: 2;
   -webkit-box-orient: vertical;
}
.newsdesc h3{
	font-size: 0.6em;
	font-weight: 600;
	color: black;
	overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 9; /* number of lines to show */
           line-clamp: 2;
   -webkit-box-orient: vertical;
}


.square .iconslist {
	width: 75%;
	padding: 3px;
	padding-top:10px;
	margin: auto;
}

.square .icongroup {
	font-size: 0.9em;
}

.square .rating h3{
	display: block;
	font-size: 0.5em;
	padding-right: 10px;
	white-space: nowrap;
	padding-top:2px;
	padding-bottom: 3px;
	text-align:left;
	font-weight: 700;
	height:10%;
	color: var(--mainfont);
}
.square .sqbottlist {
	margin: auto;
	height: 45%;
	
}
.square .sqcontact {
	display: flex;
	background-color: var(--white);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 5px 0px 0px 10px;
	height: 15%;
	
	border-radius: 0 0 5px 5px ;
}
.square .sqcontactprice {
	display: flex;
}
.square .pricefrom {
	
}
.square .pricefrom h4{
	font-size: 0.3em;
	color: var(--mainback);
}

.square .bottomarea {
	background-color: var(--bestatgray);
	height: 25%;
	width: 100%;
	border-radius: 5px;
}

.square .bottomtext1{
	padding-top: 5px;
	text-align:left;
	padding-left: 20px;
	height: 30%;
	width: 100%;
}
.square .bottomtext1 h3{
	font-size: 0.4em;
	font-weight: 600;
	color: var(--bestat);
}
.square .bottomtext2 {
	text-align:left;
	padding-left:10px;
	height: 30%;
	width: 100%;
}
.square .bottomtext2 h5{
	font-size: 0.4em;
	font-weight: 600;
	color: red;
}

.square .actionbuttonnews {
	font-size: 0.4em;
	margin: 0% 10%;
	border: 1px var(--bestat) solid;
	border-radius: 5px;
	color: var(--white);
	font-weight: bold;
	background: var(--bestat);
	padding: 5px;
	width:80%
}


.square .sqcontmore {
	width: 30%;
	margin: 5px;
	background-color: var(--action);
	border:solid var(--mainback) 1px;
	border-radius: 5px;
	text-align: center;
	padding: 12px 5px 5px 5px;
	margin-right: 10px 20px 10px opx;
	color: var(--white);
}
.square .sqcontmore:hover {
	background-color: var(--white);
	color: var(--action);
	cursor:pointer;
	border:solid var(--action) 1px;
}

/* end of square*/


.small .sqtop {
	
	display: flex;
	width: 100%;
	height: 35%;
}
.small .sqtopleft {
	
	width: 100%;
	height: 100%;
}

.small .sqtopright {
	width: 50%;
	
}
.small .sqtoprighttit { 
	display: block;
	height: 25%;
	width: 100%;
	border-radius: 0 5px  0 0;
	background-color: var(--bestatblue);
	
}
.small .sqtoprighttit h2{
	
	color: var(--mainback);
	font-size: 0.6em;
	padding-left: 5px;
	padding-top:4px;
	padding-right: 4px;
	padding-bottom: 2px;
	text-align:center;
	font-weight: 700;
	border-radius: 0 5px  0 0;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	
}
.small .sqtoprightprice {
	color: var(--darkfont);
	font-size: 1em;
	text-align: center;
	padding-top: 10px;
}
.small .sqtoprightprice h3{
	font-weight: bold;
}
.small .sqtoprightpricetype {
	font-size: 0.6em;
	text-align: right;
	padding-right: 10px;
}
.small .sqtoprightpricetype h4{
	color: var(--mainback);
}
.small .sqtoprightcontact {
	padding-top: 15px;
	display: flex;
	justify-content: space-around;
}
.small .sqcontact {

	
	
}
.small .sqcontactphone {
	padding-top: 5px;
		text-align: center;
	color: var(--mainback);
	font-size: 0.35em;
}
.small .sqcontactphone h3{
	font-weight: bold;
}
.small .sqcontactemail {
	
}

.small .sqcontactemail .agentmailicon i{
	width:100%;
    color: var(--white);
    font-size:0.7em;
    margin-left: 34px;
}
.small .sqcontactemail .agentmailicon h5{
	cursor:pointer;
	color: var(--mainback);
	font-size: 0.4em;
	font-weight: bold;
}
.small .dealpicbox {
	position:relative;
	top: -51px;
	height:100%;
	border-radius: 5px 5px 0 0;
}
.small .dealpicboxnews {
	position:relative;
	top: 0px;
	height:100%;
	border-radius: 5px 5px 0 0;
}

.small .sqbott {
	
	width: 100%;
}
.small .sqdestination {
	display: block;
	text-transform: uppercase;
	padding-left: 10px;
	padding-top: 8px;
	padding-bottom: 3px;
	text-align:left;
	height:5%;
	white-space: nowrap;
	max-width: 40ch;
	width: 100%;
	min-width: 1px;
}
.small .sqdestination h3{
	font-size: 0.5em;
	font-weight: 700;
	color: var(--darkfont);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.small .sqhead {
	display: block;
	text-transform: uppercase;
	padding-left: 10px;
	padding-top: 8px;
	
	text-align:left;
	height:5%;
	white-space: nowrap;
	max-width: 40ch;
	width: 100%;
	min-width: 1px;
}
.small .sqhead h3{
	font-size: 0.5em;
	font-weight: 700;
	color: var(--bestat);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.small .sqsubtit {
	display: block;
	padding-left: 10px;
	
	padding-bottom: 3px;
	text-align:left;
	height:5%;
	white-space: nowrap;
	max-width: 50ch;
	width: 100%;
	min-width: 1px;
}
.small .sqsubtit h3{
	font-size: 0.3em;
	font-weight: 900;
	color: var(--paleback);
	white-space: nowrap;

	
}
.small .sqbotttitle {
	display: flex;
	justify-content: space-between;
	
	height: 6%
}
.small .sqbotttitle h3 {
	
}
.small .sqbotname {
	display: block;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 10px;
	text-align:left;
	height:20%;
	white-space: nowrap;
	max-width: 22ch;
	width: 98%;
	min-width: 1px;
}
.small .sqbotname h3{
	font-size: 0.5em;
	font-weight: 700;
	color: var(--mainback);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.small .sqdescr {
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 35px;
	padding-bottom: 3px;
	text-align:left;
	height:80%;
	overflow: hidden;
	max-width: 22ch;
	width: 100%;
	min-width: 1px;
}
.small .sqdescr h3{
	font-size: 0.4em;
	font-weight: 600;
	color: black;
	overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 9; /* number of lines to show */
           line-clamp: 2;
   -webkit-box-orient: vertical;
}
.small .iconslist {
	width: 75%;
	padding: 3px;
	padding-top:10px;
	margin: auto;
}

.small .icongroup {
	font-size: 0.9em;
}

.small .rating h3{
	display: block;
	font-size: 0.5em;
	padding-right: 10px;
	white-space: nowrap;
	padding-top:2px;
	padding-bottom: 3px;
	text-align:left;
	font-weight: 700;
	height:10%;
	color: var(--mainfont);
}
.small .sqbottlist {
	margin: auto;
	height: 45%;
	
}
.small .sqcontact {
	display: flex;
	background-color: var(--white);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 5px 0px 0px 10px;
	height: 15%;
	
	border-radius: 0 0 5px 5px ;
}
.small .sqcontactprice {
	display: flex;
}
.small .pricefrom {
	
}
.small .pricefrom h4{
	font-size: 0.3em;
	color: var(--mainback);
}
.small .pricevalue{
	
}
.small .pricevalue h3{
	padding-left: 20px;
	font-size: 0.4em;
	font-weight: 600;
	color: var(--bestat);
}
.small .pricetype {
	
}
.small .pricetype h5{
	text-align:left;
	padding-left:10px;
	margin-top:-5px;
	
	font-weight: 700;
	color: red;
}

.small .sqcontmore {
	width: 30%;
	margin: 5px;
	background-color: var(--action);
	border:solid var(--mainback) 1px;
	border-radius: 5px;
	text-align: center;
	padding: 12px 5px 5px 5px;
	margin-right: 10px 20px 10px opx;
	color: var(--white);
}
.small .sqcontmore:hover {
	background-color: var(--white);
	color: var(--action);
	cursor:pointer;
	border:solid var(--action) 1px;
}

/* end of small*/


.wide .sqtop {
	
	
	width: 33%;
	height: 100%;
}
.wide .sqtopleft {
	
	width: 100%;
	height: 100%;
}

.wide .sqtopright {
	width: 50%;
	
}
.wide .sqtoprighttit { 
	display: block;
	height: 25%;
	width: 100%;
	border-radius: 0 5px  0 0;
	background-color: var(--mainfont);
	
}
.wide .sqtoprighttit h2{
	
	color: var(--mainback);
	font-size: 0.6em;
	padding-left: 5px;
	padding-top:4px;
	padding-right: 4px;
	padding-bottom: 2px;
	text-align:center;
	font-weight: 700;
	border-radius: 0 5px  0 0;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	
}
.wide .sqtoprightprice {
	color: var(--darkfont);
	font-size: 1em;
	text-align: center;
	padding-top: 10px;
}
.wide .sqtoprightprice h3{
	font-weight: bold;
}
.wide .sqtoprightpricetype {
	font-size: 0.6em;
	text-align: right;
	padding-right: 10px;
}
.wide .sqtoprightpricetype h4{
	color: var(--mainback);
}
.wide .sqtoprightcontact {
	padding-top: 15px;
	display: flex;
	justify-content: space-around;
}
.wide .sqcontact {

	
	
}
.wide .sqcontactphone {
	padding-top: 5px;
		text-align: center;
	color: var(--mainback);
	font-size: 0.35em;
}
.wide .sqcontactphone h3{
	font-weight: bold;
}
.wide .sqcontactemail {
	
}

.wide .sqcontactemail .agentmailicon i{
	width:100%;
    color: var(--white);
    font-size:0.7em;
    margin-left: 34px;
}
.wide .sqcontactemail .agentmailicon h5{
	cursor:pointer;
	color: var(--mainback);
	font-size: 0.4em;
	font-weight: bold;
}
.wide .dealpicbox {
	position:relative;
	top: -51px;
	height:100%;
	border-radius: 5px 5px 0 0;
}
.wide .dealpicboxnews {
	position:relative;
	top: 0px;
	height:100%;
	border-radius: 5px 5px 0 0;
}

.wide .sqbott {
	background-color: var(--white);
	width: 67%;
	height: 100%;
	border-radius: 5px;
}
.wide .sqdestination {
	display: block;
	text-transform: uppercase;
	padding-left: 10px;
	padding-top: 8px;
	padding-bottom: 3px;
	text-align:left;
	height:5%;
	white-space: nowrap;
	max-width: 40ch;
	width: 100%;
	min-width: 1px;
}
.wide .sqdestination h3{
	font-size: 0.5em;
	font-weight: 700;
	color: var(--darkfont);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.wide .sqhead {
	display: block;
	text-transform: uppercase;
	padding-left: 10px;
	padding-top: 8px;
	background-color: var(--white);
	text-align:left;
	height:20%;
	white-space: nowrap;
	max-width: 50ch;
	width: 100%;
	min-width: 1px;
}
.wide .sqbotttitle {
	display: flex;
	justify-content: space-between;
	background-color: var(--white);
	height: 50%
}
.wide .sqbotttitle h3{
	font-size: 0.5em;
	font-weight: 700;
	color: var(--bestat);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}

.wide .sqbotname {
	display: block;
	padding-left: 20px;
	padding-bottom: 3px;
	text-align:left;
	height:50%;
	white-space: nowrap;
	max-width: 40ch;
	width: 98%;
	min-width: 1px;
	background-color: var(--white);
}
.wide .sqbotname h3{
	font-size: 0.5em;
	font-weight: 700;
	color: var(--bestatpale);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}

.wide .mainarea {
	height: 55%
}

.wide .sqdescr {
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 3px;
	text-align:left;
	height:100%;
	overflow: hidden;
	
	width: 100%;
	min-width: 1px;
	background-color: var(--white);
}
.wide .sqdescr h3{
	font-size: 0.4em;
	font-weight: 600;
	color: black;
	overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 7; /* number of lines to show */
           line-clamp: 2;
   -webkit-box-orient: vertical;
}


.wide .iconslist {
	width: 75%;
	padding: 3px;
	padding-top:10px;
	margin: auto;
}

.wide .icongroup {
	font-size: 0.9em;
}

.wide .rating h3{
	display: block;
	font-size: 0.5em;
	padding-right: 10px;
	white-space: nowrap;
	padding-top:2px;
	padding-bottom: 3px;
	text-align:left;
	font-weight: 700;
	height:10%;
	color: var(--mainfont);
}
.wide .sqbottlist {
	margin: auto;
	height: 45%;
	
}
.wide .sqcontact {
	display: flex;
	background-color: var(--white);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 5px 0px 0px 10px;
	height: 15%;
	
	border-radius: 0 0 5px 5px ;
}
.wide .sqcontactprice {
	display: flex;
}
.wide .pricefrom {
	
}
.wide .pricefrom h4{
	font-size: 0.3em;
	color: var(--mainback);
}

.wide .bottomarea {
	background-color: var(--white);
	height: 25%;
	width: 100%;
	border-radius: 5px;
	display: flex;
}

.wide .bottomtext1{
	display: block;
	padding-top: 5px;
	text-align:left;
	padding-left: 20px;
	height: 100%;
	width: 100%;
}
.wide .bottomtext1 h3{
	font-size: 0.4em;
	font-weight: 600;
	color: var(--bestat);
}
.wide .bottomtext2 {
	display: block;
	text-align:left;
	padding-left:10px;
	height: 100%;
	width: 100%;
}
.wide .bottomtext2 h5{
	font-size: 0.4em;
	font-weight: 600;
	color: red;
}

.wide .bottombutton {
	display: block;
	margin-top:15px;
	width: 100%;
}

.wide .actionbuttonnews {
	font-size: 0.4em;
	margin: 0% 10%;
	border: 1px var(--bestat) solid;
	border-radius: 5px;
	color: var(--white);
	font-weight: bold;
	background: var(--bestat);
	padding: 5px;
	width: 80%;
}


.wide .sqcontmore {
	width: 30%;
	margin: 5px;
	background-color: var(--action);
	border:solid var(--mainback) 1px;
	border-radius: 5px;
	text-align: center;
	padding: 12px 5px 5px 5px;
	margin-right: 10px 20px 10px opx;
	color: var(--white);
}
.wide .sqcontmore:hover {
	background-color: var(--white);
	color: var(--action);
	cursor:pointer;
	border:solid var(--action) 1px;
}

/* end of wide*/



.fullpage {
	padding-top: 20px;
		width: 95%;
		margin: auto;
		max-width: 1250px;
		white-space: wrap;
		overflow: auto;
		text-overflow: ellipsis;
		word-wrap: break-word;
}

.fullpage h3 {
	color: var(--bestat);
	font-weight: 700;
}


.sqcontmore h3{
	font-weight: normal;
	font-size: 0.6em;
	}
	
.morebutton {
	width: 90%;
	margin: 5px;
	background-color: var(--action);
	border:solid var(--mainback) 1px;
	border-radius: 3px;
	text-align: center;
	padding: 6px 8px;
	
	color: var(--mainback);
	font-size: 0.6em;
	font-weight: bold;
}
	
.agentpiccorner {
	position:relative;
	top:-7px;
	left:-7px;
	width: 100%;
	z-index:1;
	
}

.agentpiccorner img{
	width: 15%;
	border-radius: 100%;
	border: #fff solid 2px;
}


/*start of tall*/

.tall .dealbox2 {
	border-radius: 5px;
	/*box-shadow: red 0px 10px 36px 0px, yellow 0px 0px 0px 1px;*/
	
}
.tall .sqtop {
	width: 100%;
	height: 50%;
	
}
.tall .sqtopleft {
	
	width: 100%;
	height: 65%;
}

.tall .sqtopright {
	width: 100%;
	height: 25%;
	
}
.tall .sqtoprighttit { 
	display: block;
	height: 35%;
	width: 100%;
	border-radius: 0 5px  0 0;
	background-color: var(--mainfont);
	
}
.tall .sqtoprighttit h2{
	
	color: var(--mainback);
	font-size: 0.6em;
	padding-left: 5px;
	padding-top:4px;
	padding-right: 4px;
	padding-bottom: 5px;
	text-align:center;
	font-weight: 700;
	
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	
}
.tall .sqtoprightprice {
	color: var(--darkfont);
	font-size: 1em;
	text-align: center;
	padding-top: 10px;
}
.tall .sqtoprightprice h3{
	font-weight: bold;
}
.tall .sqtoprightpricetype {
	font-size: 0.6em;
	text-align: right;
	padding-right: 10px;
}
.tall .sqtoprightpricetype h4{
	color: var(--mainback);
}
.tall .sqtoprightcontact {
	padding-top: 15px;
	display: flex;
	justify-content: space-around;
}
.tall .sqcontact {

	
	
}
.tall .sqcontactphone {
	padding-top: 5px;
		text-align: center;
	color: var(--mainback);
	font-size: 0.35em;
}
.tall .sqcontactphone h3{
	font-weight: bold;
}
.tall .sqcontactemail {
	
}

.tall .sqcontactemail .agentmailicon i{
	width:100%;
    color: var(--white);
    font-size:0.7em;
    margin-left: 34px;
}
.tall .sqcontactemail .agentmailicon h5{
	cursor:pointer;
	color: var(--mainback);
	font-size: 0.4em;
	font-weight: bold;
}
.tall .dealpicbox {
	height:100%;
	border-radius: 5px 5px 0 0;
}
.tall .sqbott {
	
	width: 100%;
}
.tall .sqbotttitle {
	display: flex;
	justify-content: space-between;
	background-color: var(--mainback);
	height: 5%;
}
.tall .sqbotttitle h3 {
	
}
.tall .sqbotname {
	display: block;
	padding-left: 10px;
	padding-top: 8px;
	padding-bottom: 3px;
	text-align:left;
	height:12%;
	white-space: nowrap;
	max-width: 22ch;
	width: 60%;
	min-width: 1px;
}
.tall .sqbotname h3{
	font-size: 0.5em;
	font-weight: 700;
	color: var(--mainfont);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.tall .iconslist {
	width: 75%;
	padding: 3px;
	padding-top:10px;
	margin: auto;
}

.tall .icongroup {
	font-size: 0.9em;
}

.tall .rating h3{
	display: block;
	font-size: 0.5em;
	padding-right: 10px;
	white-space: nowrap;
	padding-top:2px;
	padding-bottom: 3px;
	text-align:left;
	font-weight: 700;
	height:10%;
	color: var(--mainfont);
}
.tall .sqbottlist {
	margin: auto;
	height: 45%;
	
	
}
.tall .sqcontact {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding: 10px;
	height: 10%;
	background-color: var(--mainfont);
	border-radius: 0 0 5px 5px ;
}
.tall .sqcontmore {
	
}
.tall .sqcontmore {
	width: 28%;
	margin: 5px;
	background-color: var(--action);
	border:solid var(--white) 1px;
	border-radius: 5px;
	text-align: center;
	padding: 5px;
	color: var(--white);
}
.tall .sqcontmore:hover {
	background-color: var(--white);
	color: var(--action);
	cursor:pointer;
	border:solid var(--action) 1px;
}
.sqcontmore h3{
	
	font-weight: bold;
	font-size: 0.5em;
	
}

/*links to social*/
#details-share {
	
    vertical-align: middle;
	width:50%;
    margin: auto;
    text-align: center;
}
.socialarea {
	
}
.sociallayout {
	display: flex;
}
.icon-facebook-circle, .icon-twitter-circle, .icon-linkedin-circle, .icon-youtube-circle, .icon-instagram-circle, .icon-pinterest-circle, .icon-weibo-circle, .icon-email-circle {
    display: inline-block;
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
   
    width: 45px;
    height: 45px;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    -webkit-transition: background-color .1s ease;
    transition: background-color .1s ease;
	margin:10px;
}
.icon-facebook, .button-signin-facebook::before, .button-facebook::before, .icon-facebook-circle::before {

    background-position: center;
	background-size: cover;
    background-repeat: no-repeat;
    background-image: url("http://tagent.uk/img/siteimg/facebook.png");
}
.icon-twitter, .button-signin-twitter::before, .button-twitter::before, .icon-twitter-circle::before {

    background-position: center;
	background-size: cover;
    background-repeat: no-repeat;
	padding:10px;
    background-image: url("http://tagent.uk/img/siteimg/twitter.JPG");
}
.icon-instagram, .button-signin-instagram::before, .button-instagram::before, .icon-instagram-circle::before {

    background-position: center;
	background-size: cover;
    background-repeat: no-repeat;
    background-image: url("http://tagent.uk/img/siteimg/instagram.JPG");
}
::selection {
    background-color: #bfddfe;
    text-shadow: none;
}
[role=button] {
    cursor: pointer;
}
.icon-facebook-circle {
    border-color: #3b5998;
}
.icon-twitter-circle {
    border-color: #090B0C;
}
.icon-instagram-circle {
    border-color: #D33D96;
}
.icon-email-circle {
    border-color: #919191;
}

.rightdesignshow {
	display: block;
}
.socialarea {
	display: block;
	
}